giofus giofus - 3 months ago 24
CSS Question

Bootstrap Accordion not collapsing?

I am having trouble with a bootstrap accordion. I would like the accordion to open a specific section and then close all other sections so to leave the focus only ever on one accordion box. I have a nested accordion also which I am thinking is causing some problems.

HTML

<div class="panel panel-group" id="accordion">
<div class="panel panel-default">
<div class="brown panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_1">
Accordion #1
</a>
</h4>
</div>
<div id="col_1" class="panel-collapse collapse in">
<div class="panel-body">
<div class="panel panel-default">
<div class="pink panel-heading">
<h4 class="panel-title" style="font-size: 14px;">
<a class="accordion-toggle2" data-toggle="collapse" data-parent="#col_2" href="#col_2">
Accordion #sub1
</a>
</h4>
</div>
<div id="col_2" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="pink panel-heading">
<h4 class="panel-title" style="font-size: 14px;">
<a class="accordion-toggle2" data-toggle="collapse" data-parent="#col_3" href="#col_3">
Accordion #sub2
</a>
</h4>
</div>
<div id="col_3" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="pink panel-heading">
<h4 class="panel-title" style="font-size: 14px;">
<a class="accordion-toggle2" data-toggle="collapse" data-parent="#col_4" href="#col_4">
Accordion #sub3
</a>
</h4>
</div>
<div id="col_4" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="brown panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_7">
Accordion #2
</a>
</h4>
</div>
<div id="col_7" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="brown panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_8">
Accordion #3
</a>
</h4>
</div>
<div id="col_8" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
</div>
</div>

Answer

Your child Accordion items aren't collapsing because you're setting data-parent to their own individual boxes. If you apply an ID of accordion-sub to .panel-body and then change your data-parent to match you'll achieve something functional.

http://www.bootply.com/fceay0SjKE

Comments