title: Bootstrap Accordion Not Closing
body: <p>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.</p>
  <p>Is there a way to make the other sections close, leaving only one open at a time?</p>
  <p>HTML:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;container&quot;&gt;
    &lt;!-- begin left nav --&gt;
    &lt;div class=&quot;col-sm-2&quot;&gt;
      &lt;div class=&quot;left-nav&quot;&gt;
        &lt;div class=&quot;accordion&quot; id=&quot;accordion2&quot;&gt;
          &lt;!-- group start --&gt;
          &lt;div class=&quot;accordion-group&quot;&gt;
          &lt;div class=&quot;accordion-heading&quot;&gt;
            &lt;a class=&quot;accordion-toggle leftnav-primary&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;#accordion2&quot; href=&quot;#collapseOne&quot;&gt;
            Main Link 1
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div id=&quot;collapseOne&quot; class=&quot;accordion-body collapse&quot;&gt; &lt;!-- add &quot;in&quot; to class to load acc section open --&gt;
            &lt;div class=&quot;accordion-inner&quot;&gt;
            &lt;div class=&quot;left-nav-section&quot;&gt;&lt;a href=&quot;product.html&quot; class=&quot;leftnav-secondary&quot;&gt;Product 1&lt;/a&gt;&lt;/div&gt; &lt;!-- add &quot;selected-section&quot; to add background color --&gt;
            &lt;div class=&quot;left-nav-section&quot;&gt;&lt;a href=&quot;product.html&quot; class=&quot;leftnav-secondary&quot;&gt;Product 2&lt;/a&gt;&lt;/div&gt;
            &lt;div class=&quot;left-nav-section&quot;&gt;&lt;a href=&quot;product.html&quot; class=&quot;leftnav-secondary&quot;&gt;Product 3&lt;/a&gt;&lt;/div&gt;
            &lt;div class=&quot;left-nav-section&quot;&gt;&lt;a href=&quot;product.html&quot; class=&quot;leftnav-secondary&quot;&gt;Product 4&lt;/a&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt; &lt;!-- end group --&gt;
          &lt;!-- group start --&gt;
          &lt;div class=&quot;accordion-group&quot;&gt;
          &lt;div class=&quot;accordion-heading&quot;&gt;
            &lt;a class=&quot;accordion-toggle leftnav-primary&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;#accordion2&quot; href=&quot;#collapseTwo&quot;&gt;
            Main Link 2
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div id=&quot;collapseTwo&quot; class=&quot;accordion-body collapse&quot;&gt;
            &lt;div class=&quot;accordion-inner&quot;&gt;
            &lt;div class=&quot;left-nav-section&quot;&gt;&lt;a href=&quot;product.html&quot; class=&quot;leftnav-secondary&quot;&gt;Link&lt;/a&gt;&lt;/div&gt;
                         &lt;div class=&quot;left-nav-section&quot;&gt;&lt;a href=&quot;product.html&quot; class=&quot;leftnav-secondary&quot;&gt;Link&lt;/a&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt; &lt;!-- end group --&gt;
          &lt;!-- group start --&gt;
          &lt;div class=&quot;accordion-group&quot;&gt;
          &lt;div class=&quot;accordion-heading&quot;&gt;
            &lt;a class=&quot;accordion-toggle leftnav-primary&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;#accordion2&quot; href=&quot;#collapseThree&quot;&gt;
            Main Link 3
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div id=&quot;collapseThree&quot; class=&quot;accordion-body collapse&quot;&gt;
            &lt;div class=&quot;accordion-inner&quot;&gt;
            &lt;div class=&quot;left-nav-section&quot;&gt;&lt;a href=&quot;product.html&quot; class=&quot;leftnav-secondary&quot;&gt;Link&lt;/a&gt;&lt;/div&gt;
                         &lt;div class=&quot;left-nav-section&quot;&gt;&lt;a href=&quot;product.html&quot; class=&quot;leftnav-secondary&quot;&gt;Link&lt;/a&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt; &lt;!-- end group --&gt;
          &lt;!-- group start --&gt;
          &lt;div class=&quot;accordion-group&quot;&gt;
          &lt;div class=&quot;accordion-heading&quot;&gt;
            &lt;a class=&quot;accordion-toggle leftnav-primary&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;#accordion2&quot; href=&quot;#collapseFour&quot;&gt;
            Main Link 4
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div id=&quot;collapseFour&quot; class=&quot;accordion-body collapse&quot;&gt;
            &lt;div class=&quot;accordion-inner&quot;&gt;
            &lt;div class=&quot;left-nav-section&quot;&gt;&lt;a href=&quot;product.html&quot; class=&quot;leftnav-secondary&quot;&gt;Link&lt;/a&gt;&lt;/div&gt;
                         &lt;div class=&quot;left-nav-section&quot;&gt;&lt;a href=&quot;product.html&quot; class=&quot;leftnav-secondary&quot;&gt;Link&lt;/a&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt; &lt;!-- end group --&gt;
          &lt;!-- group start --&gt;
          &lt;div class=&quot;accordion-group&quot;&gt;
          &lt;div class=&quot;accordion-heading&quot;&gt;
            &lt;a class=&quot;accordion-toggle leftnav-primary&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;#accordion2&quot; href=&quot;#collapseFive&quot;&gt;
            Main Link 5
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div id=&quot;collapseFive&quot; class=&quot;accordion-body collapse&quot;&gt;
            &lt;div class=&quot;accordion-inner&quot;&gt;
            &lt;div class=&quot;left-nav-section&quot;&gt;&lt;a href=&quot;product.html&quot; class=&quot;leftnav-secondary&quot;&gt;Link&lt;/a&gt;&lt;/div&gt;
                         &lt;div class=&quot;left-nav-section&quot;&gt;&lt;a href=&quot;product.html&quot; class=&quot;leftnav-secondary&quot;&gt;Link&lt;/a&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt; &lt;!-- end group --&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- /left nav --&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre class="lang-css prettyprint-override"><code>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: &quot;progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff)&quot;;
    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; }
  </code></pre>
  <p>Here is my JS Fiddle with the working accordion:
  <a href="http://jsfiddle.net/lorkel/pK7cA/" rel="nofollow noreferrer">http://jsfiddle.net/lorkel/pK7cA/</a></p>