Bootstrap Accordion in two columns

Question

I'll preface this by saying I'm on the tail-end of a 13-hour day & my eyes are bleeding.

I've been trying to figure out why my accordion on this project is misbehaving now, when it was working fine earlier. The accordion is split roughly in half, with the first two items behaving as they should but the latter three simply remain open when another is expanded. My HTML is as follows:

 <hr class="style-five"> <center><h1 class="hidden-sm hidden-xs" style=" font-family: 'Stylist Pro Regular Regular';">some text.</h1></center> <center><h3 class="visible-sm visible-xs" style="margin-top: -55px; font-family: 'Stylist Pro Regular Regular';">some text.</h3></center> <div class="row"> <div class="col-md-6"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <center>some text</center></a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <p>some text</p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <center>some text</center></a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <p>some text</p> </div> </div> </div> </div> </div> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> <center>some text</center></a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> <p>some text</p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingFour"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> <center>some text</center></a> </h4> </div> <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"> <div class="panel-body"> <p>some text</p> <a class="bodlink" href="#">some text</a> some text </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingFour"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive"> <center>some text</center></a> </h4> </div> <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive"> <div class="panel-body"> <p>some text</p> <p>some text</p> <p>some text</p> </div> </div> </div> </div> </div> </hr> 

I'm calling the CSS, JQuery & JS as follows:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

What have I missed?

Answer 1

Thats the issue then: you can't have a panel group splint into columns, with the same ID, operating in unison. You need JS to handle it.

Duplicate

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <center>some text</center></a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <p>some text</p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <center>some text</center></a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <p>some text</p> </div> </div> </div> </div> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> <center>some text</center></a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> <p>some text</p> </div> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <p>some text</p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingFour"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> <center>some text</center></a> </h4> </div> <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"> <div class="panel-body"> <p>some text</p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingFive"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive"> <center>some text</center></a> </h4> </div> <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive"> <div class="panel-body"> <p>some text</p> </div> </div> </div> </div> </div> </div> </div>