JQuery UI аккордеон: открыть сразу несколько панелей

Ответ 1

Как отмечали другие, виджет Accordion не имеет опции API, чтобы сделать это напрямую. Однако, если вы должны использовать виджет, это можно достичь, используя параметр beforeActivate, чтобы подорвать и эмулировать поведение по умолчанию виджета.

Например:

$('#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 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 icon
        currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);

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

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

См. демон jsFiddle

Ответ 2

Аккордеон, по определению, представляет собой набор расширяющихся элементов, которые переключаются определенным образом. Вы этого не хотите. Вам просто нужен набор расширяющихся элементов. Это очень легко построить, что с jQuery. Для этого часто не требуется ничего больше:

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

Ответ 3

Вы можете написать несколько аккордеонов, которые сложены, и каждый аккордеон имеет только одну панель. Таким образом, панели могут быть индивидуально переключены.