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

Give all content divs a common class name, e.g. ‘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/.