Toggle 1 <div> at a time with Image Changing using JQuery

Question

Please see this site: http://www.sensationsskin.com/site10/treatments/skin-care.html

I've got it working, but am wanting the "+" to change to the "-" (expandbutton-close.gif). I'm using CSS right now to pull up the image, but I think I need to incorporate it into the JQuery code?

    <script type="text/javascript">
$(document).ready(function(){
//hide the all of the element with class msg_body
$(".msg_body").hide();
//toggle the componenet with class msg_body
$(".msg_head").click(function(){
if ( $(this).next(".msg_body").is(':visible') ) {
$(".msg_body").hide();
} else {
$(".msg_body").hide();
$(this).next(".msg_body").slideToggle(450);
}
});
});
</script>
<script type="text/javascript">
$("h2.msg_head").click(function() {
  var head = $(this);
  var body = head.next();
  if (body.is(":visible")) {
    head.css("backgroundImage", "url(images/expandbutton-close.gif)");
    body.slideDown();
  } else {
    head.css("backgroundImage", "url(images/expandbutton-open.gif)")
    body.slideUp();
  }
});
</script>

Answer 1

This should do it:

$("h2.msg_head").click(function() {
  var head = $(this);
  var body = head.next();
  if (body.is(":visible")) {
    head.css("backgroundImage", "url(images/expandbutton-close.gif)");
    body.slideDown();
  } else {
    head.css("backgroundImage", "url(images/expandbutton-open.gif)")
    body.slideUp();
  }
});

However I tend to recommend not setting CSS style attributes directly. Classes tend to be a cleaner, more flexible solution so add:

h2.msg_body { background-image: url(images/expandbutton-close.gif); }
h2.open { background-image: url(images/expandbutton-close.gif); }

and then do:

$("h2.msg_head").click(function() {
  var head = $(this);
  var body = head.next();
  if (body.is(":visible")) {
    head.removeClass("open");
    body.slideDown();
  } else {
    head.addClass("open");
    body.slideDown();
  }
});