title: jQuery Toggle Show/Hide w/Multiple DIV ID's
body: <p>CODE:</p>
  
  <pre><code>$(document).ready(function() {
  
      $('.toggle').hide();
  
      $('.show').click(function(){
  
          $('.toggle').toggle('slow'); 
  
          $(this).attr('src','images/checkmark2.jpg');
  
      },function(){
  
          $('.toggle').toggle('slow'); 
  
          $(this).attr('src', 'images/checkmark1.jpg');
  
          return false;
      });
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;img class="show" src="images/checkmark1.jpg"/&gt;Header Text
  </code></pre>
  
  <p>Hidden Text is in a div class "toggle" to be seen when you click on the checkmark1.jpg image. With multiple "toggle" div classes, they all expand at once.</p>
  
  <p>When "toggle" is set to ID # in the Script and HTML, they expand independently (as how I would like), but you cannot use the same DIV ID # Name throughout. So how would i change the code to use multiple toggle DIV IDs; or use "toggle" classes that don't expand every one at once ???</p>
  
  <p>HERE is a direct link to my code.
  <a href="http://www.flipflopmedia.com/test/ToggleTEST_html.txt" rel="nofollow noreferrer">http://www.flipflopmedia.com/test/ToggleTEST_html.txt</a>
  When I try to insert it, it's being rendered and not displaying so that you can actually see it. Yes, I'm using the code button 'enter code here' to apply it, not working!</p>