Question

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”.

Answer 1

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).