Bootstrap Collapse Accordion One Panel Open, All Others Close

I have created two bootstrap accordions, one below the other. I did not like the way that the panels were awkwardly shifting locations when I had them all as one accordion, so I cr

Solution 1:

To have multiple accordions but only one open at the same time you just need to combine the data-parent. So I have made a codepen for you to see it working.

I just changed all data-parent to data-parent="#accordion,#accordion2"

<divclass="row"><divclass="panel-group"id="accordion"role="tablist"aria-multiselectable="true"><divclass="panel panel-default col-md-4"><divclass="panel-heading  bites-stings"role="tab"id="headingSeven"><arole="button"data-toggle="collapse"data-parent="#accordion,#accordion2"href="#collapseOne"aria-expanded="false"aria-controls="collapseOne"><h2>Bites and Stings</h2></a></div><divid="collapseOne"class="panel-collapse collapse"role="tabpanel"aria-labelledby="headingOne"><divclass="panel-body"><ahref="health-resources/mosquitoes.html"><h4>Mosquitoes</h4></a><ahref="health-resources/ticks.html"><h4>Ticks</h4></a><ahref="#"><h4>Bees and Wasps</h4></a><ahref="#"><h4>Animal Bites</h4></a></div></div></div><divclass="panel panel-default col-md-4"><divclass="panel-heading pet-health"role="tab"id="headingTwo"><aclass="collapsed"role="button"data-toggle="collapse"data-parent="#accordion,#accordion2"href="#collapseTwo"aria-expanded="false"aria-controls="collapseTwo"><h2>Pet Health and Safety</h2></a></div><divid="collapseTwo"class="panel-collapse collapse"role="tabpanel"aria-labelledby="headingTwo"><divclass="panel-body"><ahref="#"><h4>Pet Allergies</h4></a><ahref="#"><h4>Toxic Plants</h4></a><ahref="#"><h4>Pet and Wildlife Encounters</h4></a></div></div></div><divclass="panel panel-default col-md-4"><divclass="panel-heading livestock-health"role="tab"id="headingThree"><aclass="collapsed"role="button"data-toggle="collapse"data-parent="#accordion,#accordion2"href="#collapseThree"aria-expanded="false"aria-controls="collapseThree"><h2>Livestock Health and Safety</h2></a></div><divid="collapseThree"class="panel-collapse collapse"role="tabpanel"aria-labelledby="headingThree"><divclass="panel-body"><ahref="#"><h4>This is a Topic</h4></a><ahref="#"><h4>Topic 2</h4></a><ahref="#"><h4>Another Topic</h4></a></div></div></div></div></div><divclass="row"><divclass="panel-group"id="accordion2"role="tablist"aria-multiselectable="true"><divclass="panel panel-default col-md-4"><divclass="panel-heading zoonotic"role="tab"id="headingFour"><arole="button"data-toggle="collapse"data-parent="#accordion,#accordion2"href="#collapseFour"aria-expanded="true"aria-controls="collapseFour"><h2>Zoonotic Diseases</h2></a></div><divid="collapseFour"class="panel-collapse collapse"role="tabpanel"aria-labelledby="headingFour"><divclass="panel-body"><ahref="#"><h4>Bacterial</h4></a><ahref="#"><h4>Fungal</h4></a><ahref="#"><h4>Parasitic</h4></a><ahref="#"><h4>Prionotic</h4></a><ahref="#"><h4>Rickettsial</h4></a><ahref="#"><h4>Spirochetes</h4></a><ahref="#"><h4>Viral</h4></a></div></div></div><divclass="panel panel-default col-md-4"><divclass="panel-heading allergies"role="tab"id="headingFive"><aclass="collapsed"role="button"data-toggle="collapse"data-parent="#accordion,#accordion2"href="#collapseFive"aria-expanded="false"aria-controls="collapseFive"><h2>Allergies</h2></a></div><divid="collapseFive"class="panel-collapse collapse"role="tabpanel"aria-labelledby="headingFive"><divclass="panel-body"><ahref="#"><h4>Animal Allergies</h4></a><ahref="#"><h4>Environmental Allergies</h4></a></div></div></div><divclass="panel panel-default col-md-4"><divclass="panel-heading environment-health"role="tab"id="headingSix"><aclass="collapsed"role="button"data-toggle="collapse"data-parent="#accordion,#accordion2"href="#collapseSix"aria-expanded="false"aria-controls="collapseSix"><h2>Environmental Health</h2></a></div><divid="collapseSix"class="panel-collapse collapse"role="tabpanel"aria-labelledby="headingSix"><divclass="panel-body"><ahref="#"><h4>This is a Topic</h4></a><ahref="#"><h4>Topic 2</h4></a><ahref="#"><h4>Another Topic</h4></a></div></div></div></div><!--/collapse--></div>