using slidetoggle to display content, would like to display + and - buttons based on current condition

Question

I use slideToggle to toggle div's of content and I was wondering how I would be able to change between two images, one being a plus (+) sign, to click to display the content and a minus (-) sign to hide the content.

Any help is appreciated.

This is what I have to toggle one of the div's

$(document).ready(function() {
 $('#planning-click').click(function() {
  $("#planning").slideToggle(100);
 });
});

Answer 1

You can simply change the src on the image and it should update. So you just add

$(link).attr('src', urlForNewimage);

inside of your click function there.

Answer 2

Use the toggleClass method on the link and change it's bacgkround accordingly.

$(document).ready(function() {
 $('#planning-click').click(function() {
  $("#planning").slideToggle(100);
  $(this).toggleClass("open");
 });
});

#planning-click {
    background: url(minus.png) no-repeat;
}
.open {
    background-image: url(plus.png);
}