title: show/hide div by clicking image
body: <p>I want to be able to click on images to show/hide a div (with text). I've got this working for one image, but I have multiple images that need to toggle text.</p>
  
  <p>The javascript code</p>
  
  <pre><code>    $(document).ready(function() {
  
      $(".slidingDiv").hide();
      $(".show_hide").show();
  
      $('.show_hide').click(function() {
          $("slidingDiv").slideToggle();
      });
  
  });
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;a href="#" class="show_hide"&gt;&lt;img src="image.jpg"&gt;&lt;/a&gt;
  &lt;div class="slidingDiv"&gt;
      &lt;h2&gt;Title&lt;/h2&gt;
      &lt;p&gt;text&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So this works, but it only works for one image+div. I want to have a second image and div, but using the same <code>slidingDiv</code> class and then clicking the second image to toggle the second div obviously toggles both divs. </p>
  
  <p>So how can I get two images to toggle their own div, instead of toggling both divs at the same time when clicking one of the two images?</p>