I have a functioning Bootstrap 3.0 accordion that opens when you click one of the Main Links. The only issue is that if you click on a second Main Link, the first link does not collapse - they all just stay open.
Is there a way to make the other sections close, leaving only one open at a time?
HTML:
<div class="container"> <!-- begin left nav --> <div class="col-sm-2"> <div class="left-nav"> <div class="accordion" id="accordion2"> <!-- group start --> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle leftnav-primary" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Main Link 1 </a> </div> <div id="collapseOne" class="accordion-body collapse"> <!-- add "in" to class to load acc section open --> <div class="accordion-inner"> <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Product 1</a></div> <!-- add "selected-section" to add background color --> <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Product 2</a></div> <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Product 3</a></div> <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Product 4</a></div> </div> </div> </div> <!-- end group --> <!-- group start --> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle leftnav-primary" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> Main Link 2 </a> </div> <div id="collapseTwo" class="accordion-body collapse"> <div class="accordion-inner"> <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Link</a></div> <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Link</a></div> </div> </div> </div> <!-- end group --> <!-- group start --> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle leftnav-primary" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"> Main Link 3 </a> </div> <div id="collapseThree" class="accordion-body collapse"> <div class="accordion-inner"> <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Link</a></div> <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Link</a></div> </div> </div> </div> <!-- end group --> <!-- group start --> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle leftnav-primary" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour"> Main Link 4 </a> </div> <div id="collapseFour" class="accordion-body collapse"> <div class="accordion-inner"> <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Link</a></div> <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Link</a></div> </div> </div> </div> <!-- end group --> <!-- group start --> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle leftnav-primary" data-toggle="collapse" data-parent="#accordion2" href="#collapseFive"> Main Link 5 </a> </div> <div id="collapseFive" class="accordion-body collapse"> <div class="accordion-inner"> <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Link</a></div> <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Link</a></div> </div> </div> </div> <!-- end group --> </div> </div> </div> <!-- /left nav --> </div> CSS:
body { margin: 10px; background-color: #eee; } .left-nav { width:200px; padding: 15px; font-size: 110%; text-transform: uppercase; background-color:#ff0; -moz-border-radius: 2px; -webkit-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; background: rgb(255, 255, 255) transparent; background: rgba(255, 255, 255, 0.6); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff)"; overflow:hidden; } a.leftnav-primary:link { color:#363; text-decoration: none; } a.leftnav-primary:visited { color:#363; text-decoration: none; } a.leftnav-primary:hover { color:#6e2585; text-decoration: none; } a.leftnav-primary:active { color:#363; text-decoration: underline; } a.leftnav-secondary:link { color:#6c6f70; text-decoration: none; font-size: 90%; } a.leftnav-secondary:visited { color:#6c6f70; text-decoration: none; font-size: 90%; } a.leftnav-secondary:hover { color:#6e2585; text-decoration: none; font-size: 90%; } a.leftnav-secondary:active { color:#6e2585; text-decoration: underline; font-size: 90%; } .left-nav-section { padding-left: 20px; } .left-nav-section:hover { background-color: #eee; } Here is my JS Fiddle with the working accordion: http://jsfiddle.net/lorkel/pK7cA/
