title: Jquery toggle - expand / collapse on multiple divs
body: <p>I recently found some very easy to use Jquery code, which basically toggles and div visible and not visible.</p>
  
  <p>The code is working on the first div - but lets say I have multiple  with the same structure listing down, and I want the toggle to work on the specific second or third div im clicking.</p>
  
  <p>Im wondering if it's possible to expand the following code to be dynamic for that.</p>
  
  <p>Example with two divs (only first one will work):</p>
  
  <pre><code>&lt;a id="toggle" href="javascript:void(0);"&gt;Expand box 1&lt;/a&gt; 
  &lt;div id="content"&gt;Content 1&lt;/div&gt; 
  &lt;div id="contentHidden" style="display:none;"&gt;Hidden 1&lt;/div&gt;
  
  &lt;br&gt;&lt;br&gt;
  
  &lt;a id="toggle" href="javascript:void(0);"&gt;Expand box 2&lt;/a&gt; 
  &lt;div id="content"&gt;Content 2&lt;/div&gt; 
  &lt;div id="contentHidden" style="display:none;"&gt;Hidden 2&lt;/div&gt;
  </code></pre>
  
  <p>Jquery:</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
  $(function() // run after page loads 
  { 
    $("#toggle").click(function() 
    {  
      // hides matched elements if shown, shows if hidden 
      $("#content, #contentHidden").toggle(); 
    }); 
  });
  </code></pre>