Personnalisation du comportement de l'accordéon JQuery - jquery, jquery-ui-accordéon

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 / développe / active l'un des divs, celui-ci doit être différent (par exemple, changer la couleur de l'arrière-plan) des autres divs. Est-il possible de le faire en utilisant simplement la fonctionnalité de l'accordéon? Ou cela doit-il être fait avec du javascript supplémentaire?

Veuillez noter que j'utilise l'accordéon qui est documenté à http://docs.jquery.com/UI/Accordion

Réponses:

Puisque seule la div développée est visible, pourquoi ne pas simplement définir l’arrière-plan de chacune d’elles?

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

Une autre option consiste à se connecter au change événement (copier / coller à partir de la documentation):

$(".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");
});