Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery UI accordion: open multiple panels at once

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.

like image 266
Tarun Avatar asked Mar 29 '13 11:03

Tarun


3 Answers

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

like image 82
Boaz Avatar answered Nov 07 '22 04:11

Boaz


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

like image 43
anssi Avatar answered Nov 07 '22 02:11

anssi


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>
like image 6
isherwood Avatar answered Nov 07 '22 02:11

isherwood