переключение 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>

1009 * CSS *

.hidden {display:none;}

Какой-нибудь совет, как добиться того, что я ищу? В настоящее время div переключается просто отлично, но триггер text / image является статическим.

Спасибо!

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

и я испекла вам демо