title: Show/Hide div below link
body: <p>I have a few links on a page all with the same class "expand-content-link" which are all directly above a div with some content in it , set to "display:none;" (with the same class "hidden-content").</p>
  
  <p>I want to be able to click the link and only the div below the link toggles to visible.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="content-holder"&gt;
  &lt;a href="#" class="expand-content-link"&gt;Expand Content 1&lt;/a&gt;
  &lt;div class="hidden-content"&gt;Bunch of hidden content and stuff here&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="content-holder"&gt;
  &lt;a href="#" class="expand-content-link"&gt;Expand Content 2&lt;/a&gt;
  &lt;div class="hidden-content"&gt;Bunch of hidden content for div 2&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="content-holder"&gt;
  &lt;a href="#" class="expand-content-link"&gt;Expand Content 3&lt;/a&gt;
  &lt;div class="hidden-content"&gt;Bunch of hidden content for div 3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now my javascript is as follows, but it currently expands all content with the class "hidden-content" (for obvious reasons) and I can't figure out how to manipulate the code so it only displays the content that it needs too.</p>
  
  <p>javascript:</p>
  
  <pre><code> &lt;script&gt;
      jQuery(document).ready(function() { 
          jQuery(".expand-content-link").click(function() {
              jQuery(".content-holder").find(".hidden-content", this).toggle();
              return false;   
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>JSFIDDLE DEMO:
  <a href="http://jsfiddle.net/PsAh9/" rel="nofollow">http://jsfiddle.net/PsAh9/</a></p>