切換div以及使用jquery「展開/摺疊」文本和圖像

Question

我有一個簡單的jquery，我用它來切換div的可見性（下圖）。我想添加的是一些文字和一些加號圖像，它們在div展開後變爲不同的文字和減號圖像。這裏是我的代碼：

jQuery的

$(document).ready(function(){ 
    $(".toggle").click(function(){ 
    $(".hidden").slideToggle("slow"); 
    }); 
}); 

HTML

// this will be changed to Hide Panel <img src="minusSign.gif"> 
// and doesn't have to live in a <p> 
<p class="toggle">Show Panel <img src="plusSign.gif"></p> 
<div class="hidden"> 
Blah Blah Blah 
</div> 

CSS

.hidden {display:none;} 

如何實現我正在尋找任何建議嗎？目前，div切換正常，但觸發文本/圖像是靜態的。

謝謝！

Answer 1

我不禁注意到，你需要像這樣...

$(".toggle").click(function(){ 
    $(".hidden").slideToggle("slow"); 
    $(this).html(function(i,html) { 
     if (html.indexOf('Show') != -1){ 
      html = html.replace('Show','Hide'); 
     } else { 
      html = html.replace('Hide','Show'); 
     } 
     return html; 
    }).find('img').attr('src',function(i,src){ 
     return (src.indexOf('plusSign.gif') != -1)? 'minusSign.gif' : 'plusSign.gif'; 
    }); 
}); 

and I baked you a demo