Установить разворачивание/свертывание фоновых изображений в заголовках

Я пытаюсь установить другое фоновое изображение для свернутого и расширенного заголовков на аккордеоне. Пожалуйста, помогите, как мне это сделать.

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; }

Я знаю, что мой Аккордеон покрывает только функцию щелчка заголовка, но мне было интересно, могу ли я также включить функцию готовности. Таким образом, какой бы заголовок ни был расширен, он получит класс «headingactive».