Jscript - stuck with hide/reveal divs

Question

I'm currently working on a website and in my mainContent div i have 5 divs. 1 div is visible by default and the other 4 are hidden (note: the default visible div corresponds to home page content). I also have 5 links in a sideMenu that correspond to each of the hidden/visible divs.

The goal that i am trying to achieve is the following using Jscript:

• when clicking one of the links from the sideMenu i would like the corresponding div to be made visible(if hidden) and the rest of the divs hidden.

Could anybody help with any pointers?

attempt at an illustration:

->>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

Default Home page:

link1 | link2 | link3

contentDiv:

div1 - visible

div2 - hidden

div3 - hidden

->>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

Link2 was pressed:

link1 | LINK2 | link3

contentDiv:

div1 - hidden

div2 - visible

div3 - hidden

Answer 1

I would use jQuery and do something like this

function changePage(page){
    $('#contentDiv').children('div').each(function(){
         if($(this).css('display') != 'none')
         {
              $(this).css('display', 'none'))
         }
});

      switch(page){
         case 1:
             //make home visible
         break;
         case 2:
             //make about visible
         break;
         case 3:
             //make contact visible
         break;

       }
}

These buttons are in the side bar, when clicked, they go to the function, hides the currently displaying page, and then uses a switch to decide what new page to display

<button onclick="changePage(1)">Home</button>
<button onclick="changePage(2)">About</button>
<button onclick="changePage(3)">Contact</button>

Ps I haven't actually checked this code, but I think you get the idea

Answer 2

Give all content divs a common class name, eg 'contentPanel' and each one a unique ID, like #home-panel , #page1-panel , etc. You should style all these with display:none except the home div. Set up your links like this:

<a href="#home-panel" class="panel-link">Home</a>
<a href="#page1-panel" class="panel-link>Page1</a>
<!-- etc.. -->

For the script, one suggestion is to use jQuery . It might look like

$(".panel-link").click(function() {
    var target = $(this).attr("href");
    $(".contentPanel").hide();
    $(target).show();
});

If you'd like the script to run correctly in parallel with browser history changes, check out Ben Alman's jQuery hash change plugin: http://benalman.com/projects/jquery-hashchange-plugin/ . I used this on my old website: http://paislee.net/ .

Answer 3

Say your html is something like this:

<ul>
<li><a  class='link' data-linkno='1' href="#">Link 1</a></li>
<li><a class='link' data-linkno='2' href="#">Link 2</a></li>
<li><a class='link' data-linkno='3' href="#">Link 3</a></li>
</ul>
<div class='content' id='div1">blah</div>
<div class='content' id='div2">blah</div>
<div class='content' id='div3">blah</div>

The following jQuery or something similar should work

 $(function() {
       $(".link").live("click", function(e) {
       $(".content").hide();
       $("#div"+$(this).data("linkno")).show();
        })
    })