Question

I’m trying to figure out a function that will allow me to hide divs and show them if referring link is clicked.

Hard to explain but here is what I am looking for:

<ul>
   <li><a href="#id-1">Link 1</a></li>
   <li class="active"><a href="#id-2">Link 1</a></li>
   <li><a href="#id-3">Link 1</a></li>
<ul>
<div id="id-1">Some content</div> // Hidden
<div id="id-2">Some content</div> //  This should only show in document
<div id="id-3">Some content</div> // hidden

Whenever other anchor is being clicked other divs should hide.

I hope his make sense and thank you for your help in advance

Dom

Answer 1

You can use something like this (untested so may need tweaking):

$(document).ready(function() {              //fires on dom ready

    $("a").click(function(e) {              //assign click handler to all <a> tags

        $(".classForYourDivs").hide();      //hide all divs (put class on ones you want to hide)

        var element = $(e.target);
        var href = element.attr("href");    //get the attribute

        $(href).show();                     //show the relevent one
        return false;                       //important to stop default click behavior of link
    });

});

Incidentally you should consider using something other than the href to store this information… take a look at the docs for the jquery data() function