Personnalisation du comportement de l'accordéon JQuery

Question

J'utilise le widget accordéon de JQuery. J'ai besoin d'un exemple générique simple qui montre comment configurer un accordéon sur un ensemble de divs. Lorsque l'utilisateur sélectionne/expand/active l'un des divs, alors ce div devrait être différent (par exemple changer la couleur d'arrière-plan) que les autres divs. Est-il possible de le faire en utilisant simplement la fonctionnalité de l'accordéon? Ou cela doit-il être fait par javascript supplémentaire?

S'il vous plaît noter que je suis en utilisant l'accordéon qui est documenté à http://docs.jquery.com/UI/Accordion

Answer 1

Depuis que le div élargi est visible, pourquoi ne pas simplement mis l'arrière-plan pour chacun d'eux?

Le contenu actif a la classe ui-accordion-content-active. Vous pourriez écraser le style pour cette classe.

Une autre option est de brancher à l'événement change (copier/coller de 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 
}); 

Par exemple:

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