jQuery Toggle显示/隐藏w /多个DIV ID

$(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

当您单击checkmark1.jpg图像时,隐藏文本位于div类中“切换”.使用多个“toggle”div类,它们都会立即扩展.

当“toggle”在脚本和HTML中设置为ID#时,它们会独立扩展(按照我的意愿),但您不能在整个过程中使用相同的DIV ID#Name.那么我将如何更改代码以使用多个切换DIV ID;或使用“切换”类不会一次扩展每一个???

这里是我的代码的直接链接.
http://www.flipflopmedia.com/test/ToggleTEST_html.txt
当我尝试插入它时,它正在渲染而不显示,以便您可以实际看到它.是的,我正在使用代码按钮’在这里输入代码’来应用它,而不是工作！

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>

脚本(已更新以使用您的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 );
  });
 })
})