basculer div ainsi que "agrandir/réduire" texte et image avec jquery

Question

J'ai une simple pièce de jquery que j'utilise pour basculer la visibilité d'un div (ci-dessous). Ce que je voudrais ajouter, c'est du texte et une petite image de signe plus qui change en texte différent et une image de signe moins après l'expansion de la div. Voici mon code:

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

Tous les conseils sur la façon d'atteindre ce que je cherche? Actuellement, le div bascule bien, mais le texte/l'image du déclencheur est statique.

Merci!

Answer 1

Je ne peux pas aider mais on a remarqué que vous besoin de quelque chose comme ça ...

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