Question

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

Answer 1

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.