Set expand/collapse background images on headers

I am trying to set a different background image for collapsed and expanded headers on an accordion. Please provide assistance on how I can accomplish this.

Jquery:

$(document).ready(function() { $('ul#accordion a.heading').click(function() {

        if($(this).parent().hasClass('current')) {          
            $(this).siblings('ul').slideUp('normal',function() {
                $(this).parent().removeClass('current');
            });
        } else {
            $('ul#accordion li.current ul').slideUp('normal',function() {
                $(this).parent().removeClass('current');
            });
            $(this).siblings('ul').slideToggle('normal',function() {
                $(this).parent().toggleClass('current');
            });

        }
        return false;
    }); });

HTML:

<ul id="accordion">

     <li id="AR" class="current">
       <a href="#" class="heading">ALL RESOURCES</a>
         <ul>resource options</ul>
     </li>


     <li id="BU">
       <a href="#" class="heading">BUREAUS</a>
         <ul>bureaus options</ul>
     </li>

     <开发者_运维问答;li id="BN">
        <a href="#" class="heading">BUSINESS NEEDS</a>
          <ul>business options</ul>
     </li>

</ul><!-- END ACCORDION -->

CSS:

ul#accordion li a.heading { background-color: blue; }
ul#accordion li a.headingactive { background-color:red; }

I know that my Accordion only covers the click function of the header but I was wondering if I can also incorporate the ready function. So whichever heading is expanded, it will receive the class "headingactive".

If it's at the same each li element gets the current class, you really don't need a new class since you can style with the selector ul#accordion li.current a.heading (to be overly specific).