Question

I have a setup like this:

Link          ------------------------------
Link          |                            |
Link          |                            |
Link          |            DIV             |
              |                            |
              |                            |
              ------------------------------

                 (3 more divs are hidden) 

The number of links will vary but for each link there will also be one content div.

So far I have used this code and it works:

$(".link").click(function () {  
var divname = this.name;
$("."+divname).fadeIn('slow').siblings().hide();

But this time since the content is user generated I have no control over the given names.

Is it possible with jQuery to count the numbers of links and the number of boxes (which will be always equal) and let’s say I click the second link, the second div will show. If I click the third link the third div will show and so on.

This is the html:

<div id="links">
 <span>Link</span>
 <span>Link</span>
 <span>Link</span>
 <span>Link</span>
</div>

<div id="content">
 <div>DIV 1</div>
 <div>DIV 2</div>
 <div>DIV 3</div>
 <div>DIV 4</div>
</div>

This is my attempt:

$(".div").not(":first").hide();

$(".link").click(function () {  

    var number = $("#links").index(this);   

});

Not pretty much yet. But how can I now tell the content, that it should show the div with the indexed number just clicked in the links?

Answer 1

I’d try something like this:

$(".div").not(":first").hide();

$("#links span").click(function () {  
  $('#content div').eq($(this).index()).show().siblings().hide();
});