1

I tried this Bootstrap example for an accordion:

    <div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        Collapsible Group 3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
</div>

In this page is possible to read:

The following example shows a simple accordion by extending the panel component.

Note: Use the data-parent attribute to make sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.

It works fine.

Now I would to show/hide an accordion panel programmatically. So, for this, I used the methods:

.collapse("show")   Shows the collapsible element   
.collapse("hide")   Hides the collapsible element

Also this works fine but, in this case, when I show/hide the panels programmatically, after this, if I try to open/close the panels by click on panels headers (by tag) the panels do not seem to be connected anymore: when I open a panel the others do not close automatically anymore.

Have I to change or add something in the collapse Bootstrap method?

Safari
  • 11,437
  • 24
  • 91
  • 191
  • Yes, after calling `.collapse("hide")` the panel seems to have forgotten its parent, then when you click to hide, it should be closing all other panels under that parent. According to documentation there's no default parent selector when `collapse()` is called. Perhaps if you call `collapse(options)` you might be able to pass the parent in options but I don't know. – derloopkat Jan 18 '18 at 22:12

0 Answers0