title: Jquery select single element with same class as several others
body: <p>I am currently having a problem with multiple div's toggling at the same time. 
  I have these 4 div's with the same class that I want to display, how do I do that?</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="box"&gt;&lt;!-- box 1 --&gt;
      &lt;div class="link"&gt;&lt;a href="#" class="show"&gt;show content&lt;/a&gt;&lt;/div&gt;
      &lt;div class="hidden"&gt;this text is hidden&lt;/div&gt;
      &lt;/div&gt;&lt;!--box ends--&gt;
  
      &lt;div class="box"&gt;&lt;!-- box 2 --&gt;
      &lt;div class="link"&gt;&lt;a href="#" class="show"&gt;show content&lt;/a&gt;&lt;/div&gt;
      &lt;div class="hidden"&gt;this text is hidden&lt;/div&gt;
      &lt;/div&gt;&lt;!--box ends--&gt;
  
  &lt;/div&gt;&lt;!--container ends --&gt;
  </code></pre>
  
  <p>I think you get the point. The problem is, this is comes from a php while, if the user haven't contributed any content, then there wouldn't be any div's, and if he have, there will display div's equal to all his contributions. </p>
  
  <p>I have tried with </p>
  
  <pre><code>$(".show").click(function(){
  $(".hidden").toggle();
  });
  </code></pre>
  
  <p>but the above code shows all of them, so how do I show the one that was need to be shown ? 
  I hope you understand.</p>