toggling div as well as "expand/collapse" text and image with jquery

Question

Hi - I have a simple piece of jquery i am using to toggle the visibility of a div (below). What I'd like to add is some text and a little plus sign image that changes to different text and a minus sign image after the div is expanded. Here is my 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;}

Any advice on how to achieve what I'm looking for? Currently, the div toggles just fine, but the trigger text/image is static.

Thanks!

Answer 1

Use jQuerys .toggle() and .toggleClass()

$(document).ready(function(){
    $('.toggle').toggle(function(){
       $(this).slideToggle('slow').find('img').attr('src', 'minusSign.gif');
       $('div.hidden').hide();
    }, function(){
       $(this).slideToggle('slow').find('img').attr('src', 'plusSign.gif');
       $('div.hidden').show();
    });
});

If you want to change the text inside of .toggle aswell, you need to wrap that into a span for instance, and put it into the chain like

`.find('span').text('opened/closed');`

Answer 2

I can't help but noticed you need something like this...

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