Question

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

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