jQuery UI accordion: open multiple panels at once

Question

I'm trying to create an accordion able to expand multiple panels at once. I have tried to find it in the jQuery UI API, but I haven't yet found the proper way.

Please let me know if there is a way of doing this using jQuery UI accordion.

Solution 1

As others have noted, the Accordion widget does not have an API option to do this directly. However, if you must use the widget, it is possible to achieve this by using the beforeActivate event handler option to subvert and emulate the default behavior of the widget.

For example:

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

See a jsFiddle demo

Solution 2

You could write multiple accordions that are stacked and each accordion have only one panel. This way the panels could be individually toggled.

Solution 3

An accordion is, by definition, a set of expanding elements that toggle in a certain way. You don't want that. You just want a set of expanding elements. It's extremely easy to build that with jQuery. It often needs nothing more than this:

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

Comments

[Tarun]

Thanks Boaz, I not try it but as per your script it'll defiantly work with accessibility.

[Tarun]

jQuery UI accordion is not a simple slide toggle, they handle lots of things in accessibility, keyboard shortcuts, focus etc.

[isherwood]

True. I didn't mention jQuery UI Accordion. I mentioned accordion functionality in a generic sense, which is what seemed appropriate for the question above.

[Miha Šušteršič]

@Boaz hey, I've tried implementing this on my page, and now all my content divs always have the same height. Can't figure out what's going on. stackoverflow.com/questions/29327520/…

[Boaz]

@MihaŠušteršič Answered in the OP. Basically, the height of the panels can be set by the accordion's styleHeight property, which in your case should probably be styleHeight:'content'.

[Philipp]

+1 Works perfectly! In the line: currContent.toggleClass('accordion-content-active',!isPanelS‌​elected) you missed a semicolon at the end though ;)

[jinglesthula]

This works in jQuery UI 1.9.2 (released in 2012) which is used in the example fiddle. While it still works in at least 1.10.4, newer versions of jQuery UI will leave open panels in a halfway state when you call the refresh method on the accordion. (Internally the widget uses an index for the active panel, so it's strongly coded to allow a max of 1 panel open at a time). My current approach will probably have to be noting which are open, closing them all, refreshing, then re-opening the ones that had been open before. Lots of animation, but not sure how else to make it work at present.