Personnaliser JQuery comportement Accordéon

Question

J'utilise le widget accordéon de JQuery. J'ai besoin d'un simple exemple générique qui montre comment configurer un accordéon sur un ensemble de divs. Lorsque l'utilisateur sélectionne / développe / active l'un des divs alors que div doit ê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é du accordian? Ou est-ce besoin d'ê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 / Accordéon

Answer 1

Puisque seule la div étendue est visible, pourquoi ne pas situé juste l'arrière-plan pour chacun d'eux?

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

Une autre option consiste à brancher à l'événement change (copier / coller de documents):

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