How to apply stored index to another div?
<p>I have a following problem here: in my html structure I got some div's and they are initially hidden. What I am trying to do is this: on click of a paragraph tag store it's index and apply that same index to hidden div (witch also has the same index as "clicked" p tag).
<br/><b>For example:</b> when I click SHOW RED DIV 'paragraph' show the hidden div <b>(div with class red)</b> with the same index as clicked p tag. My code is not working because it shows all hidden div's and because I don't know how to apply stored index :( &nbsp;&nbsp;I hope that someone can help me... THX!! <br/><br/>Here's the <a href="http://jsfiddle.net/DJ5Gs/" rel="nofollow">Fiddle</a><br>
<br/>This is what I got so far:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;style type="text/css"&gt;
div{width:100px;height:100px;display:none;}
.red{background-color:red;}
.blue{background-color:blue;}
.green{background-color:green;}
&lt;/style&gt;

&lt;script type="text/javascript"&gt;
$(document).ready(function(){
   $("p").click(function(){
   var index=$(this).index(this);
   $('div').data('index',index).show('slow');
   });
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="red"&gt;&lt;/div&gt;
&lt;div class="blue"&gt;&lt;/div&gt;
&lt;div class="green"&gt;&lt;/div&gt;
&lt;span&gt;
&lt;p&gt;SHOW RED DIV&lt;/p&gt;
&lt;p&gt;SHOW BLUE DIV&lt;/p&gt;
&lt;p&gt;SHOW GREEN DIV&lt;/p&gt;
&lt;/span&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
