Bootstrap 3 collapse accordion collapse all works but then cannot expand all while maintaining data-parent

Question

I m using Bootstrap 3 and trying to setup the following accordion collapse structure    Onload  Each accordion panel in a group is fully collapsed and functions as documented expected  Button click  Each accordion panel expands and clicking the toggles has no effect  including URL anchor effects   Another button click  All panels return to onload state  all collapsed and clickable as normal    I ve made it to step 2  but when I click the button again at step 3 it has no effect  I also see no console errors reported in Chrome Dev Tools or by running the code through my local JSHint   I d like this cycle to be repeatable each time the button is clicked   I ve setup my code here http   bootply com 98140 and here http   jsfiddle net A9vCx   I d love to know what I m doing wrong and I appreciate suggestions  Thank you   My HTML    lt button class  collapse-init  gt Click to disable accordion behavior lt  button gt   lt br gt  lt br gt   lt div class  panel-group  id  accordion  gt     lt div class  panel panel-default  gt       lt div class  panel-heading  gt         lt h4 class  panel-title  gt           lt a data-toggle  collapse  data-parent   accordion  href   collapseOne  gt            Collapsible Group Item  1          lt  a gt         lt  h4 gt       lt  div gt       lt div id  collapseOne  class  panel-collapse collapse  gt         lt div class  panel-body  gt          Anim pariatur cliche reprehenderit  enim eiusmod high life accusamus terry richardson ad squid         lt  div gt       lt  div gt     lt  div gt     lt div class  panel panel-default  gt       lt div class  panel-heading  gt         lt h4 class  panel-title  gt           lt a data-toggle  collapse  data-parent   accordion  href   collapseTwo  gt            Collapsible Group Item  2          lt  a gt         lt  h4 gt       lt  div gt       lt div id  collapseTwo  class  panel-collapse collapse  gt         lt div class  panel-body  gt          Anim pariatur cliche reprehenderit  enim eiusmod high life accusamus terry richardson ad squid         lt  div gt       lt  div gt     lt  div gt     lt div class  panel panel-default  gt       lt div class  panel-heading  gt         lt h4 class  panel-title  gt           lt a data-toggle  collapse  data-parent   accordion  href   collapseThree  gt            Collapsible Group Item  3          lt  a gt         lt  h4 gt       lt  div gt       lt div id  collapseThree  class  panel-collapse collapse  gt         lt div class  panel-body  gt          Anim pariatur cliche reprehenderit  enim eiusmod high life accusamus terry richardson ad squid         lt  div gt       lt  div gt     lt  div gt   lt  div gt    My JS     function        var  active   true         panel-title  gt  a   click function e        e preventDefault                 collapse-init   on  click   function         if   active           active   true            panel-title  gt  a   attr  data-toggle    collapse              panel-collapse   collapse   toggle   true   parent     accordion             this  html  Click to disable accordion behavior          else          active   false            panel-collapse   collapse   toggle   true   parent     accordion               panel-title  gt  a   removeAttr  data-toggle            this  html  Click to enable accordion behavior

User · Accepted Answer

Updated Answer

Trying to open multiple panels of a collapse control that is setup as an accordion i.e. with the data-parent attribute set, can prove quite problematic and buggy (see this question on multiple panels open after programmatically opening a panel)

Instead, the best approach would be to:

Allow each panel to toggle individually
Then, enforce the accordion behavior manually where appropriate.

To allow each panel to toggle individually, on the data-toggle="collapse" element, set the data-target attribute to the .collapse panel ID selector (instead of setting the data-parent attribute to the parent control. You can read more about this in the question Modify Twitter Bootstrap collapse plugin to keep accordions open.

Roughly, each panel should look like this:

<div class="panel panel-default">
   <div class="panel-heading">
         <h4 class="panel-title"
             data-toggle="collapse" 
             data-target="#collapseOne">
             Collapsible Group Item #1
         </h4>
    </div>
    <div id="collapseOne" 
         class="panel-collapse collapse">
        <div class="panel-body"></div>
    </div>
</div>

To manually enforce the accordion behavior, you can create a handler for the collapse show event which occurs just before any panels are displayed. Use this to ensure any other open panels are closed before the selected one is shown (see this answer to multiple panels open). You'll also only want the code to execute when the panels are active. To do all that, add the following code:

$('#accordion').on('show.bs.collapse', function () {
    if (active) $('#accordion .in').collapse('hide');
});

Then use show and hide to toggle the visibility of each of the panels and data-toggle to enable and disable the controls.

$('#collapse-init').click(function () {
    if (active) {
        active = false;
        $('.panel-collapse').collapse('show');
        $('.panel-title').attr('data-toggle', '');
        $(this).text('Enable accordion behavior');
    } else {
        active = true;
        $('.panel-collapse').collapse('hide');
        $('.panel-title').attr('data-toggle', 'collapse');
        $(this).text('Disable accordion behavior');
    }
});

Working demo in jsFiddle

User · Answer

To keep the accordion nature intact when wanting to also use  hide  and  show  functions like  collapse   hide     you must initialize the collapsible panels with the parent property set in the object with toggle  false before making any calls to  hide  or  show      initialize collapsible panels     accordion  collapse   collapse     toggle  false    parent    accordion          show panel one  will collapse others in accordion       collapseOne    collapse   show         show panel two  will collapse others in accordion       collapseTwo    collapse   show         hide panel two  will not collapse expand others in accordion       collapseTwo    collapse   hide

User · Answer

The best and tested solution is to put the following small snippet which will collapse the accordion tab which is already open when you load  In my case the last sixth tab was open so I made it collapsed on page load       document  ready              collapseSix   collapse  hide

User · Answer

For whatever reason     panel-collapse   collapse   toggle   true   parent     accordion     only seems to work the first time and it only works to expand the collapsible    I tried to start with a expanded collapsible and it wouldn t collapse      It could just be something that runs once the first time you initialize collapse with those parameters    You will have more luck using the show and hide methods   Here is an example     function        var  active   true         panel-title  gt  a   click function e        e preventDefault                 collapse-init   on  click   function         if   active           active   true            panel-title  gt  a   attr  data-toggle    collapse              panel-collapse   collapse  hide            this  html  Click to disable accordion behavior          else          active   false            panel-collapse   collapse  show              panel-title  gt  a   attr  data-toggle               this  html  Click to enable accordion behavior                       http   bootply com 98201  Update  Granted KyleMit seems to have a way better handle on this then me   I m impressed with his answer and understanding   I don t understand what s going on or why the show seemed to be toggling in some places   But After messing around for a while    Finally came with the following solution     function       var transition   false    var  active   true         panel-title  gt  a   click function e        e preventDefault                 accordion   on  show bs collapse  function        if  active               accordion  in   collapse  hide                       accordion   on  hidden bs collapse  function        if transition           transition   false              panel-collapse   collapse  show                       collapse-init   on  click   function             collapse-init   prop  disabled   true        if   active           active   true            panel-title  gt  a   attr  data-toggle    collapse              panel-collapse   collapse  hide            this  html  Click to disable accordion behavior          else          active   false        if     panel-collapse in   length           transition   true              panel-collapse in   collapse  hide                         else              panel-collapse   collapse  show                      panel-title  gt  a   attr  data-toggle               this  html  Click to enable accordion behavior              setTimeout function                collapse-init   prop  disabled             800               http   bootply com 98239

[jquery] Bootstrap 3 collapse accordion: collapse all works but then cannot expand all while maintaining data-parent

Updated Answer

Working demo in jsFiddle

Examples related to jquery

Examples related to accordion

Examples related to twitter-bootstrap-3

Examples related to collapse