Customize JQuery Accordion behaviour

Question

I am using JQuery's accordion widget. I need a simple generic example which shows how to setup an accordion on a set of divs. When the user selects/expands/activates one of the divs then that div should look different (for example change the background color) than the other divs. Is it possible to do this by just using the accordian's functionality? Or does this need to be done by additional javascript?

Please note that I am using the accordion that is documented at http://docs.jquery.com/UI/Accordion

Answer 1

Since only the expanded div is visible, why not just set the background for all of them?

The active content has class of ui-accordion-content-active. You could overwrite style for this class.

Another option is to plug in to the change event (copy/paste from docs):

$('.ui-accordion').bind('accordionchange', function(event, ui) {
  ui.newHeader // jQuery object, activated header
  ui.oldHeader // jQuery object, previous header
  ui.newContent // jQuery object, activated content
  ui.oldContent // jQuery object, previous content
});

For example:

$('.ui-accordion').bind('accordionchange', function(event, ui) {
  ui.newContent.addClass('myHighlight');
  ui.oldContent.removeClass('myHighlight');
});