Bootstrap Accordion button toggle "data-parent" not working

Question

I'm trying to create an accordion using Bootstrap 3 using the button collapsible with the data attribute, without the accordion markup. It just looks more cleaner to me.

However I cannot make the data-parent attribute to work. I want when opening a question, all others to close. I'm reading the docs ( http://getbootstrap.com/javascript/#collapse-usage ) but still cannot get it to work.

I'm using the following code:

<div class="accordion" id="myAccordion">     <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">     <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>     </div>     <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">     <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>     </div>     <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">     <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>     </div> </div> 

Here is the JSFiddle: http://jsfiddle.net/twinsen/AEew4/

I'll be very happy if someone points to me where I'm making a mistake :\

Answer 1

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#)

Answer 2

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.