Аккордеон jQuery UI: открывать несколько панелей одновременно

Как уже отмечалось, у виджета 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'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
    }
});

См. демонстрацию jsFiddle.

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

Аккордеон по определению представляет собой набор расширяющихся элементов, которые переключаются определенным образом. Вы не хотите этого. Вам просто нужен набор расширяющихся элементов. Это очень легко сделать с помощью 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>