Bootstrap Collapse Accordion: Opening a panel by JavaScript does not close other open panels

Question

I have an accordion which uses Bootstrap Collapse. When I click on any panel, it opens it and closes other open panels. But when I try to open a panel using JavaScript, other open panels does not close automatically.

 function openBreakfast() { $('#add-breakfast-form').collapse('show'); } function openLunch() { $('#add-lunch-form').collapse('show'); } function openDinner() { $('#add-dinner-form').collapse('show'); } function openSnacks() { $('#add-snacks-form').collapse('show'); } 

 body { padding: 20px; } .mt-20 { margin-top: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div id="food-tracker-accordion" role="tablist" class="panel-group mt-20"> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-breakfast-form">Add Breakfast</a> </h4> </div> <div id="add-breakfast-form" role="tabpanel" class="panel-collapse collapse"> <div class="panel-body"> Add Breakfast form </div> </div> </div> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-lunch-form">Add Lunch</a> </h4> </div> <div id="add-lunch-form" role="tabpanel" class="panel-collapse collapse"> <div class="panel-body"> Add Lunch form </div> </div> </div> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-dinner-form">Add Dinner</a> </h4> </div> <div id="add-dinner-form" role="tabpanel" class="panel-collapse collapse"> <div class="panel-body"> Add Dinner form </div> </div> </div> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-snacks-form">Add Snacks</a> </h4> </div> <div id="add-snacks-form" role="tabpanel" class="panel-collapse collapse"> <div class="panel-body"> Add Snacks form </div> </div> </div> </div> <div class="mt-20"> <button onclick="openBreakfast()">Open Breakfast</button> <button onclick="openLunch()">Open Lunch</button> <button onclick="openDinner()">Open Dinner</button> <button onclick="openSnacks()">Open Snacks</button> </div> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

Another interesting thing is that if I click on any panel to close, opening that panel by JavaScript closes all other open panels.

Answer 1

All you need to do is hide the panel which is opened before and you can do it by using $('.panel-collapse.in').collapse('hide'); like this

 function openBreakfast() { $('.panel-collapse.in').collapse('hide'); $('#add-breakfast-form').collapse('show'); } function openLunch() { $('.panel-collapse.in').collapse('hide'); $('#add-lunch-form').collapse('show'); } function openDinner() { $('.panel-collapse.in').collapse('hide'); $('#add-dinner-form').collapse('show'); } function openSnacks() { $('.panel-collapse.in').collapse('hide'); $('#add-snacks-form').collapse('show'); } 

 body { padding: 20px; } .mt-20 { margin-top: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div id="food-tracker-accordion" role="tablist" class="panel-group mt-20"> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-breakfast-form">Add Breakfast</a> </h4> </div> <div id="add-breakfast-form" role="tabpanel" class="panel-collapse collapse"> <div class="panel-body"> Add Breakfast form </div> </div> </div> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-lunch-form">Add Lunch</a> </h4> </div> <div id="add-lunch-form" role="tabpanel" class="panel-collapse collapse"> <div class="panel-body"> Add Lunch form </div> </div> </div> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-dinner-form">Add Dinner</a> </h4> </div> <div id="add-dinner-form" role="tabpanel" class="panel-collapse collapse"> <div class="panel-body"> Add Dinner form </div> </div> </div> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-snacks-form">Add Snacks</a> </h4> </div> <div id="add-snacks-form" role="tabpanel" class="panel-collapse collapse"> <div class="panel-body"> Add Snacks form </div> </div> </div> </div> <div class="mt-20"> <button onclick="openBreakfast()">Open Breakfast</button> <button onclick="openLunch()">Open Lunch</button> <button onclick="openDinner()">Open Dinner</button> <button onclick="openSnacks()">Open Snacks</button> </div> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>