toggling images with click

toggling images with click

I have h5 headings with a plus image (close.png) next to each one.  When I click on the h5 heading I want the hidden text underneath to appear and have the image switch to a minus (open.png).  This is what I have so far.  But swapping of the image doesn't work.

HTML:
  2. <h5>How do I join?</h5>
  3. <div class="answer">
  4.   <span style="font-weight:normal;">Simply click on the JOIN button. It is that easy! Fill out the fields and when you are done, click on the privacy agreement and then submit. Your application will be sent to the Mayor of the site and approved quickly!</span>
  5. </div> 
CSS:
  2. h5 {
  3.   background: url(close.png) no-repeat 0 11px;
  4.   padding: 10px 0 0 25px;
  5.   cursor: pointer;
  6. }
jQuery:
  1. $('.answer').hide();  
  3. $('h5').click(function(){
  4.       $(this).next().toggle(function(){
  5.         $(this).css("background-image","open.png");
  6.       },
  7.       function(){
  8.         $(this).css("background-image", "close.png");
  9.       });
  10.     });