web-dev-qa-db-fra.com

Accordéon jQuery UI: ouvrez plusieurs panneaux à la fois

J'essaie de créer un accordéon capable d'étendre plusieurs panneaux à la fois. J'ai essayé de le trouver dans l'API jQuery UI, mais je n'ai pas encore trouvé la bonne façon.

Veuillez me faire savoir s'il existe un moyen de le faire en utilisant l'accordéon jQuery UI.

jqueryjquery-uiaccordion
21
Tarun

Comme d'autres l'ont noté, le widget Accordion n'a pas d'option API pour le faire directement. Cependant, si vous devez utiliser le widget, il est possible d'y parvenir en utilisant l'option de gestionnaire d'événements beforeActivate pour subvertir et émuler le comportement par défaut du widget.

Par exemple:

$('#accordion').accordion({
    collapsible:true,

    beforeActivate: function(event, ui) {
         // The accordion believes a panel is being opened
        if (ui.newHeader[0]) {
            var currHeader  = ui.newHeader;
            var currContent = currHeader.next('.ui-accordion-content');
         // The accordion believes a panel is being closed
        } else {
            var currHeader  = ui.oldHeader;
            var currContent = currHeader.next('.ui-accordion-content');
        }
         // Since we've changed the default behavior, this detects the actual status
        var isPanelSelected = currHeader.attr('aria-selected') == 'true';

         // Toggle the panel's header
        currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));

        // Toggle the panel's icon
        currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);

         // Toggle the panel's content
        currContent.toggleClass('accordion-content-active',!isPanelSelected)    
        if (isPanelSelected) { currContent.slideUp(); }  else { currContent.slideDown(); }

        return false; // Cancel the default action
    }
});

Voir une démo jsFiddle

50
Boaz - Reinstate Monica

Vous pouvez écrire plusieurs accordéons empilés et chaque accordéon n'a qu'un seul panneau. De cette façon, les panneaux pourraient être basculés individuellement.

8
anssi

Un accordéon est, par définition, un ensemble d'éléments en expansion qui basculent d'une certaine manière. Tu ne veux pas ça. Vous voulez juste un ensemble d'éléments en expansion. Il est extrêmement facile de le construire avec jQuery. Il n'a souvent besoin de rien de plus que cela:

$('.my-heading-class').on('click', function() {
   $(this).next('.my-content-class').slideToggle();
});

<div class="my-heading-class">My Heading</div>
<div class="my-content-class">My Content</div>
6
isherwood