Question

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;
    });
});

HTML:

<img class="show" src="images/checkmark1.jpg"/>Header Text

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.

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 ???

HERE is a direct link to my code.
http://www.flipflopmedia.com/test/ToggleTEST_html.txt
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!

Answer 1

Since you didn’t provide any HTML to work from, I put some together with script that works

HTML

 <img class="show" src="images/checkmark1.jpg" /><span>Header Text 1</span>
 <div class="toggle">This is some hidden text #1</div>

 <img class="show" src="images/checkmark1.jpg" /><span>Header Text 2</span>
 <div class="toggle">This is some hidden text #2</div>

Script (updated to work with your HTML)

$(document).ready(function(){
 $('.toggle').hide();
 $('.show').click(function(){
  var t = $(this);
  // toggle hidden div
  t.next().next().toggle('slow', function(){
   // determine which image to use if hidden div is hidden after the toggling is done
   var imgsrc = ($(this).is(':hidden')) ? 'images/checkmark1.jpg' : 'images/checkmark2.jpg';
   // update image src
   t.attr('src', imgsrc );
  });
 })
})