Hi,

I'm using Ryan Stemkoski's "Stupid Simple Jquery Accordion Menu" which is available here:

stemkoski.com/stupid-simple-jquery-accordion-menu/

Here is the javascript

 $(document).ready(function() {

     //ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
     $('.accordionButton').click(function() {

      //REMOVE THE ON CLASS FROM ALL BUTTONS
      $('.accordionButton').removeClass('on');

      //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
       $('.accordionContent').slideUp('normal');

      //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
      if($(this).next().is(':hidden') == true) {

       //ADD THE ON CLASS TO THE BUTTON
       $(this).addClass('on');

       //OPEN THE SLIDE
       $(this).next().slideDown('normal');
       } 

      });


     /*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/

     //ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER 
     $('.accordionButton').mouseover(function() {
      $(this).addClass('over');

     //ON MOUSEOUT REMOVE THE OVER CLASS
     }).mouseout(function() {
      $(this).removeClass('over');          
     });

     /*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/


     /********************************************************************************************************************
     CLOSES ALL S ON PAGE LOAD
     ********************************************************************************************************************/ 
     $('.accordionContent').hide();

    });

and the CSS

#wrapper {
 width: 800px;
 margin-left: auto;
 margin-right: auto;
 }
.accordionButton { 
 width: 800px;
 float: left;
 _float: none;  /* Float works in all browsers but IE6 */
 background: #003366;
 border-bottom: 1px solid #FFFFFF;
 cursor: pointer;
 }

.accordionContent { 
 width: 800px;
 float: left;
 _float: none; /* Float works in all browsers but IE6 */
 background: #95B1CE;
 }

/***********************************************************************************************************************
 EXTRA STYLES ADDED FOR MOUSEOVER / ACTIVE EVENTS
************************************************************************************************************************/

.on {
 background: #990000;
 }

.over {
 background: #CCCCCC;
 }

There is an "on" class which allows the style of the accordionButton class when it is active but I would like to be able to have each active accordionButton class have a different image.

http://www.thepool.ie

For example, in the above site the word "WORK" should be a darker grey image when the work section is selected, so should COLLAB when it is selected etc.

I can't figure out how to do this, any help would be greatly appreciated.

Thanks, Andrew