Let's start where the speed of accordion is set to normal. Directly after the normal we're going to add a function. We don't need to name the function for this one.

    $(this).next('dd').slideToggle('normal',

       function() {

       }
    );

Notice that after the attribute 'normal', I added a comma (very important). Then inside the curly brackets for the new function, is where I add some of the code, for presentation.

    if ($(this).is(':visible')) {

       $(this).prev().css('background', 'url(images/clipboardheader.jpg));

    else {

       $(this).prev().css('background', 'url(images/clipboardheaderoff.jpg));

    }

Not that difficult to understand(I hope). Let's explain it from the top. The "this" variable means exactly what it is(this). The "this" value originally started as the "H2" that was clicked on. I then passed it, and assigned it to the  next('dd'). The it's moved on to evaluate the value of the "dd"(this) for the css visible attribute. If the visible attribute is true or false(visible or hidden), I move on to add a css background to the originating(this) H2. That's done by traversing the document with prev(), just as I used next() earlier. Now, I manipulate the H2 element with a new background image. If you need to add some additional parameters to the background image(repeat, fixed, alignment), they would go in the mix like this.

       $(this).prev().css('background', 'url(images/clipboardheaderoff.jpg) repeat-y 2px 5px');

But I don't need to do that here. That will be covered later in another entry.

Now if you notice that when all the code up to this point has been added and you execute the document, that nothing appears. HEY, What's with that!! To combat that from happening another function was added that executes when the document loads.

     $('h2').css('background', 'url(images/clipboardheaderoff.jpg)');

Remember the jQuery motto. "Write less, Do more." Good stuff I think. So what happens here is that when the document is completely loaded the ready() function executes and finds all the "h2" tags and iterates through them to assign a closed header to the H2 element like I did with the onclick function. Some other time, I will customize this functionality to a degree.

I also went ahead and added some content to the new accordion along with some additional css.

You can view the source, the css, and all other code in the working demo here.