Question

I have a site with 6 nav buttons down the side. For each of them, I want to show the corresponding DIV hide the other 5. The page loads with DIV #1 visible and the others display:none.

I know how to hide and show elements with hide(), show(), fade etc. but I am trying to come up with the best way to seamlessly show the clicked one while simultaneously hiding whichever one is currently visible, without resorting to spelling them all out like:

$('#btn1').click(function(){
$('#div2').hide();
$('#div3').hide();
$('#div1').show();
 )}

Answer 1

Here is the jquery code:

      $(document).ready(function() {
          $('#btn-next').click(function () {
          $('#recent_post').hide();
           $('#top_post').fadeIn(3000).show();
           return false;        
            }); 
        $('#btn-prev').click(function () {
        $('#top_post').hide();
        $('#recent_post').fadeIn(3000).show();
            return false;   
        }); 
        });

Here is the html:

    <div id="top_post" class="post" style="z-index:1;">
       <!---Content goes here--->
     </div>
    <div class="post" id="recent_post" style="display:none;z-index:0;">
       <!---Content goes here--->
     </div>

I have implemented it in my website.Visit ‘articles’ section in http://kaidul.web44.net/
I have just built it for two divs.Do the same work for 6 divs.Hope it works !