div를 토글 링하고 jquery로 텍스트와 이미지를 "확장/축소"합니다.

Question

div의 가시성을 토글하는 데 사용하는 jquery의 간단한 조각이 있습니다. 내가 추가하고 싶은 것은 약간의 텍스트와 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