Jquery Ui Accordion That Keeps Multiple Sections Open

jQuery UI accordion that keeps multiple sections open?

This was originally discussed in the jQuery UI documentation for Accordion:

NOTE: If you want multiple sections
open at once, don't use an accordion

An accordion doesn't allow more than
one content panel to be open at the
same time, and it takes a lot of
effort to do that. If you are looking
for a widget that allows more than one
content panel to be open, don't use
this. Usually it can be written with a
few lines of jQuery instead, something
like this:

jQuery(document).ready(function(){
  $('.accordion .head').click(function() {
      $(this).next().toggle();
      return false;
  }).next().hide();
});

Or animated:

jQuery(document).ready(function(){
  $('.accordion .head').click(function() {
      $(this).next().toggle('slow');
      return false;
  }).next().hide();
});

"I may be an idiot" - You're not an idiot if you don't read the documentation, but if you're having problems, it usually speeds up finding a solution.

jQueryUI accordion - Keep sections open

From the jQuery UI documentation:

NOTE: If you want multiple sections open at once, don't use an accordion

An accordion doesn't allow more than one content panel to be open at the same time, and it > takes a lot of effort to do that. If you are looking for a widget that allows more than one > content panel to be open, don't use this. Usually it can be written with a few lines of > jQuery instead, something like this:

jQuery UI accordion: open multiple panels at once

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

jquery ui accordion - multiple accordions expand/collapse all - style issues

After attempting to over-ride my jquery-ui styles on the page, and attempting to hack the accordion javascript to remove the ui-state-focus class, a simple solution came to light.

Because my page is displaying the expected behavior when I click else where on the page, I used blur() to lose focus.

$(document).ready(function() {
    // forces lose focus when accordion section closed. IE and FF.
    $(".ui-accordion-header").click(function(){
          $(this).blur();
        });

})

To fix the collapse all issue in IE, I added 1 line to my collapseAll() method.

function collapseAll() {
    alert("calling collapseAll");
    $("#accordion1, #accordion2, #accordion3, #accordion4")
        .filter(":has(.ui-state-active)")
        .accordion("activate", -1);
    $(".ui-accordion-header").blur();
}

Expanding and collapsing all sections of a jQuery UI accordion

I'll answer the second question first since it's the easiest. The problem was simply that you were adding a period before the class in the addClass and removeClass functions which was adding the period to the class list itself. Remove the period and it works correctly: addClass('ui-accordion-header-active');

First question was a bit harder. The accordion doesn't like to have more than one item active and messing around with the classes complicates all of this. Instead of using your add/remove class functionality on the clicks themselves it was better to add it to the accordion constructor and go from there. I borrowed the functionality from here: jQuery UI accordion that keeps multiple sections open? to figure out how to have multiple actives but keep the accordion. It injects the desired behaviour into the beforeActivate event:

$('#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; // Cancels the default action
    }
});

Then the clicks themselves check for whether any of the items have been clicked already to avoid issues with the show/hide toggle. After that check it sets that item to be active via the active option (http://api.jqueryui.com/accordion/#option-active) which then goes through the beforeActive function now set in the accordion:

$(document).on('click', '.show-all', function (event) {
    $(".ui-accordion-header").each(function(i) {
        if($(this).attr('aria-selected') == 'false') {
            $( ".accordion" ).accordion( "option", "active", i);
        }
    });
});

I set it all up here: https://jsfiddle.net/7k1stb6d/7/

Set all Jquery UI accordion to start open when loading the application

Hi refre this link https://plnkr.co/edit/MgSzjrcC08fR4xCgHyIG?p=preview

CODE

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">

</head>
<body>

<script type="text/javascript">
    (function($) {
        $(function() {
            $("#accordion > div").accordion({ header: "h3", collapsible: true });
        })
    })(jQuery);
</script>

<div id="accordion">
    <div>
        <h3><a href="#">First</a></h3>
        <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
    </div>
    <div>
        <h3><a href="#">Second</a></h3>
        <div>Phasellus mattis tincidunt nibh.</div>
    </div>
    <div>
        <h3><a href="#">Third</a></h3>
        <div>Nam dui erat, auctor a, dignissim quis.</div>
    </div>
</div>


</body>
</html>

u have to specify each accordion inside div

---

Related Topics