[jQuery] Image replacement

[Wil Everts]

I have an accordion-like setup for several divs to contract and expand when
the header text is clicked on... On the line with the headers I have an
arrow image which I would like to swap from up to down on show/hide. Can
anyone provide some pointers?

jquery:

$(document).ready(function() {
      $('div.acc> div').hide();
      $('div.acc> h1').click(function() {

        var $nextDiv = $(this).next();
        var $visibleSiblings = $nextDiv.siblings('div:visible');

        if ($visibleSiblings.length ) {
          $visibleSiblings.slideUp('slow', function() {
            $nextDiv.slideToggle('slow');
          });
        } else {
           $nextDiv.slideToggle('slow');
        }
      });
    });


html:

      <div class="acc">

            <h1>Option 1 &nbsp; <img class="arrow" src="images/up.jpg"
/></h1>
            <div>Hidden text</div>

            <h1>Option 2 &nbsp; <img class="arrow" src="images/up.jpg"
/></h1>
            <div>Hidden text</div>

            <h1>Option 3 &nbsp; <img class="arrow" src="images/up.jpg"
/></h1>
            <div>Hidden text</div>

      </div>

Thanks,

Wil