Is there a 'best practice' how to hide all except one content-DIV of an HTML5 website? Is there also a 'most used' library/libraries? Or is it often written in own JS code?
My goal is to have 9 DIVs loaded. The one in the center is the navigation, the others are content. When a nav-point is selected the specific div 'slides' to the middle and all the other DIVs are hidden.
Thank you
I usually do this:
$('.your_div').show().siblings().hide();
Replace .show() and .hide() with your desired effects.
siblings() is great but it might be too broad a selector in his use case.
.siblings('.your_div') would be better?I would add a class to all the hide and show able divs probably a class name like section.
<div class="section" id="home"> home content here... </div>
<div class="section" id="page-slug"> another page here... </div>
<div class="section" id="contact"> contact information here... </div>
Then give each div an id. FInally, in order to show the contact section you would:
$('#contact').show().siblings('.section').hide();
This method of giving like elements the same classand giving container elements an id is really just good practice regardless of the ease of use when selecting jQuery elements.
