Question

So I have this layout and I’m planning on using javascript/jquery to change the content in lower box depending on what link is active on the upper.

Before I choose how to do this I would like some inputs on what the best practice is. Im novice when it comes to changing html content using javascript. Specially if you want to factor in doing it in the most resource efficient way.

The layout in the lower box will be different from one another. So each lowerbox layout must be present in the html from the beginning? And each layout should be contained in a div element for easiest way to change the whole block. Am I thinking correctly here?

What jQuery functions should I utilize?

Answer 1

jsBin demo

Wrap all your DIVs .page inside a common container #pages:

<ul id="navigation">
   <li>Link 1</li>
   <li>Link 2</li>
   <li>Link 3</li>
   <li>Link 4</li>
   <li>Link 5</li>
</ul>
<div id="pages">
   <div class="page">Page 1</div>
   <div class="page">Page 2</div>
   <div class="page">Page 3</div>
   <div class="page">Page 4</div>
   <div class="page">Page 5</div>
</div>

Than just retrieve the index of the clicked navigation and make visible the .page with a same index:

jQuery(function($){
    
   $('.page:gt(0)').hide(); // hide all pages but first

   $('ul#navigation li').click(function(){
      var liIndex = $(this).index();
      $('.page').hide().eq(liIndex).show(); // hide all and show matching page!
   });


});