Show the div with the number that was indexed in the navigation
<p>I have a setup like this:</p>

<pre><code>Link          ------------------------------
Link          |                            |
Link          |                            |
Link          |            DIV             |
              |                            |
              |                            |
              ------------------------------

                 (3 more divs are hidden) 
</code></pre>

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

<p>So far I have used this code and it works:</p>

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

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

<p>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.</p>

<p>This is the html:</p>

<pre><code>&lt;div id="links"&gt;
 &lt;span&gt;Link&lt;/span&gt;
 &lt;span&gt;Link&lt;/span&gt;
 &lt;span&gt;Link&lt;/span&gt;
 &lt;span&gt;Link&lt;/span&gt;
&lt;/div&gt;

&lt;div id="content"&gt;
 &lt;div&gt;DIV 1&lt;/div&gt;
 &lt;div&gt;DIV 2&lt;/div&gt;
 &lt;div&gt;DIV 3&lt;/div&gt;
 &lt;div&gt;DIV 4&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>This is my attempt:</p>

<pre><code>$(".div").not(":first").hide();

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

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

});
</code></pre>

<p>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?</p>
