How to add image to show/hide div javascript?

Question

Any suggestions how to add image (like + or - ) to show/hide div in javascript?

I\'m using this code to show/hide divs:

$(function() {
    $(\'a.hide\').         


        

Answer 1

this is just pseudo code:

$(image).click(function(){
   $(div).toggle('fast',function(){
      if($(div).is(":visible"))$(image).attr('src','minus-image');
      else $(image).attr('src','plus-image');
   });
});

Answer 2

Set the image as a background in your css:

.hideable a.hide {
    background-image: url(minus.png);
    background-repeat: no-repeat;
    padding-left: 12px;
}
.hidden a.hide {
    background-image: url(plus.png);
}
.hidden .hide-container {
    display: none;
}

Then, use .toggleClass() instead of .toggle(). Apply the class to the parent element:

$('a.hide').click(function(e) {
    e.preventDefault();
    $(this).closest('.hideable').toggleClass("hidden");
});
$('a#hide-all').click(function() {
    $('.hideable').addClass("hidden");
});
$('.hideable').addClass("hidden");

Working Demo: http://jsfiddle.net/gilly3/rK7yN/1/