Hi, how do i hide sections and show them like this
i have tried setting the section positioning absolute, block, hidden but does not work =(
can someone make and upload bsdesign file for learning please
sorry for noob questions…
Tx
Like what? You’ve provided a link to a website with Bootstrap templates. There are dozens of different things on this website that can be clicked which hide and show various elements. You have to be more specific as to what you’re trying to accomplish.
Have you read the documentation? Have you taken a look at the videos on the Bootstrap Studio YouTube channel that show how to use the program?
Nothing wrong with noob questions, but your question is very vague. Nobody can help you if they don’t understand what you’re trying to do.
3 Likes
Use CSS & JS: absolute/fixed menu positioning with transition and change top distance after click on btn
For sections: use transition and change
- max-height from 0 to 100vh,
- opacity: from 0 to 100%;
Position: absolute / fixed, bottom 0, width: 100%
@michalbialkowski You saw where he wrote “noob”, right?
@skopy If you’re trying to recreate the effect that the navigation links use to display the different sections and their content, you will need to know how to write custom CSS and JavaScript (or at least copy the code & script used on this website and repurpose them.) The navigation used in this particular template is atypical. It’s definitely not something that you can achieve simply by selecting certain display options in Bootstrap Studio. Bootstrap Studio’s navigation options are limited to the built in components - Bootstrap navbars and menus that are part of the Bootstrap framework.
If you know how to use Chrome’s Developer Tools, you can find the CSS and JS used on this template website, copy it, and import it into BSS, but then you’ll have to understand how to create your own sections and assign the correct IDs and Classes. It’s not especially complex, but building something like this is a bit of work, and certainly not something I’d expect a stranger to do for free.
This forum category is primarily for those who need help with using the program. If you’re looking to have something custom coded for a website, I’d suggest posting it as a request in the Webdesign Help forum category. Some of the folks there are amenable to fulfilling these sorts of requests.
@printninja Yes, I saw, so I explained it as simply as I could
Useful links:
- CSS Transitions
- CSS Layout - The position Property
- CSS opacity property
- CSS max-height property
- jQuery addClass() Method
- jQuery removeClass() Method
As @printninja wrote, it is possible to do but will require some custom code
Good luck! 
thanks for the answers, will continue search how to do it as simply as possible and if i make it share the result here =)
Something you might want to look at is the tabs component, nearly what you want, but without anything too complicated.
Example here:
https://skopy.bss.design/
4 Likes
That was my first thought as well.
You can do it like this
1 Like
nice idea, i even started with the idea of fulscreen modals
perfect, can you share how did you manage to make the site?
Another option would be using a carousel with the slides being the pages, something like this:
2 Likes
I was hit with an overwhelming sense of deja vu upon seeing this. Have you ever made this suggestion in the forums before?
1 Like
Haha yes, although the last time it was more integrated into to a website concept. I thought that the basic development would actually work quite well for the initial post request, maybe.