Bootstrap Accordion Button Toggle "data-parent" Not Working

Answer :

Bootstrap 4

Use the data-parent="" attribute on the collapse element (instead of the trigger element)

<div id="accordion">   <div class="card">     <div class="card-header">       <h5>         <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">           Collapsible #1 trigger         </button>       </h5>     </div>     <div id="collapseOne" class="collapse show" data-parent="#accordion">       <div class="card-body">         Collapsible #1 element       </div>     </div>   </div>   ... (more cards/collapsibles inside #accordion parent) </div> 

---

Bootstrap 3

See this issue on GitHub: https://github.com/twbs/bootstrap/issues/10966

There is a "bug" that makes the accordion dependent on the .panel class when using the data-parent attribute. To workaround it, you can wrap each accordion group in a 'panel' div..

http://bootply.com/88288

<div class="accordion" id="myAccordion">     <div class="panel">         <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button>         <div id="collapsible-1" class="collapse">             ..         </div>     </div>     <div class="panel">         <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button>         <div id="collapsible-2" class="collapse">             ..         </div>     </div>     <div class="panel">         <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button>         <div id="collapsible-3" class="collapse">            ...         </div>     </div> </div> 

Edit

As mentioned in the comments, each section doesn't have to be a .panel. However...

• .panel must be a direct child of the element used as data-parent=
• each accordion section (data-toggle=) must be a direct child of the .panel (http://www.bootply.com/AbiRW7BdD6#)

Note, not only there is dependency on .panel, it also has dependency on the DOM structure.

Make sure your elements are structured like this:

    <div id="parent-id">         <div class="panel">             <a data-toggle="collapse" data-target="#opt1" data-parent="#parent-id">Control</a>             <div id="opt1" class="collapse"> ... 

It's basically what @Blazemonger said, but I think the hierarchy of the target element matters too. I didn't finish trying every possibility out, but basically it should work if you follow this hierarchy.

FYI, I had more layers between the control div & content div and that didn't work.

Bootstrap 3

Try this. Simple solution with no dependencies.

$('[data-toggle="collapse"]').click(function() {   $('.collapse.in').collapse('hide') });