jQuery accordion - different image for active sections

Question

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

Answer 1

Restating the problem

Okay, it took some doing, but I think I understand your problem. Here are the facts (correct me if I'm wrong):

1. You're using images for accordion headers (.accordionButton img).
2. You want those images to become darker when the 'on' class is applied to the header div (.accordionButton).
3. You are successfully adding an 'on' class to the header div (making it .accordionButton.on).
4. You tried changing the background color with the CSS property background.
5. Your images have a solid background color and are hard-coded in by an img tag instead of with CSS as a background-image.

The problem, in a nutshell, doesn't have to do with the accordion plugin, but with your CSS and HTML for .accordionButton when it's normal and when it's 'on'.

First step

The first thing you need to become familiar with is the 3-D CSS box model (original and interactive visualizations).

The main takeaway from this is that you cannot, actually, affect the background color of the image by means of the CSS background property. As you've declared it, the browser will try to paint the canvas (div) behind the image, and since your image is not transparent, the background color of the image will stay the same.

Solutions

The simplest answer, and probably the one you're looking for, is just to use your current image(s), but take out the background color. This will allow CSS to paint the background like you want. Just remember that the part that's in the image (in this case, the letters) won't be able to be changed by CSS alone.

Here are some other options, if that won't work for you:

1. Try doing this without images, using text only, making things much easier to manipulate with CSS. (If Arial/Helvetica won't do for you, you'll have to go the custom fonts route for this, which can be tricky.)
2. Use background images and change the background-image CSS rule for when the header is 'on'.
3. Use jQuery to change out the src attribute in your img tag, or a similar technique.