title: Bootstrap collapse with just one element shown
body: <p>I'm trying to use the collapse components of Bootstrap.</p>
  
  <p>It works well but I noticed that sometimes it doesn't close all the other elements; when I click in order from the first to the third and then back to the first again, the third one remains open.</p>
  
  <p>My markup is the same as the example code that Bootstrap provides, because I'm just testing for now.</p>
  
  <pre class="lang-html prettyprint-override"><code> &lt;div class="accordion" id="accordion2"&gt; 
          &lt;div class="accordion-group"&gt; 
            &lt;div class="accordion-heading"&gt; 
              &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"&gt; 
                Collapsible Group Item #1
              &lt;/a&gt; 
            &lt;/div&gt; 
            &lt;div id="collapseOne" class="accordion-body collapse in"&gt; 
              &lt;div class="accordion-inner"&gt; 
               Part 1
              &lt;/div&gt; 
            &lt;/div&gt; 
          &lt;/div&gt; 
  
          &lt;div class="accordion-group"&gt; 
            &lt;div class="accordion-heading"&gt; 
              &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"&gt; 
                Collapsible Group Item #2
              &lt;/a&gt; 
            &lt;/div&gt; 
            &lt;div id="collapseTwo" class="accordion-body collapse"&gt; 
              &lt;div class="accordion-inner"&gt; 
               Part 2
              &lt;/div&gt; 
            &lt;/div&gt; 
          &lt;/div&gt; 
  
          &lt;div class="accordion-group"&gt; 
            &lt;div class="accordion-heading"&gt; 
              &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"&gt; 
                Collapsible Group Item #3
              &lt;/a&gt; 
            &lt;/div&gt; 
            &lt;div id="collapseThree" class="accordion-body collapse"&gt; 
              &lt;div class="accordion-inner"&gt; 
                Part 3
              &lt;/div&gt; 
            &lt;/div&gt; 
     &lt;/div&gt; 
  </code></pre>
  
  <p>The JavaScript code is this:</p>
  
  <pre class="lang-js prettyprint-override"><code>$(".collapse").collapse("#accordion2");
  </code></pre>
  
  <p>Considering that I'm thinking to use this components in a menu, in order to show a group open according to a PHP variable value do I just have to print the class <strong>in</strong> to the <code>div</code> <code>collapseOne</code>/<code>collapseTwo</code> and so on?</p>