title: Bootstrap Accordion in two columns
body: <p>I'll preface this by saying I'm on the tail-end of a 13-hour day &amp; my eyes are bleeding.  </p>
  
  <p>I've been trying to figure out why my accordion on this project is misbehaving now, when it was working fine earlier. The accordion is split roughly in half, with the first two items behaving as they should but the latter three simply remain open when another is expanded.  My HTML is as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;hr class="style-five"&gt;
  &lt;center&gt;&lt;h1 class="hidden-sm hidden-xs" style="  font-family: 'Stylist Pro Regular Regular';"&gt;some text.&lt;/h1&gt;&lt;/center&gt;
  &lt;center&gt;&lt;h3 class="visible-sm visible-xs" style="margin-top: -55px; font-family: 'Stylist Pro Regular Regular';"&gt;some text.&lt;/h3&gt;&lt;/center&gt;
  &lt;div class="row"&gt;
   &lt;div class="col-md-6"&gt;
    &lt;div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"&gt;
      &lt;div class="panel panel-default"&gt;
     &lt;div class="panel-heading" role="tab" id="headingOne"&gt;
       &lt;h4 class="panel-title"&gt;
      &lt;a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"&gt;
        &lt;center&gt;some text&lt;/center&gt;&lt;/a&gt;
       &lt;/h4&gt;
     &lt;/div&gt;
     &lt;div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"&gt;
       &lt;div class="panel-body"&gt;
      &lt;p&gt;some text&lt;/p&gt;
       &lt;/div&gt;
     &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="panel panel-default"&gt;
     &lt;div class="panel-heading" role="tab" id="headingTwo"&gt;
       &lt;h4 class="panel-title"&gt;
      &lt;a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"&gt;
        &lt;center&gt;some text&lt;/center&gt;&lt;/a&gt;
       &lt;/h4&gt;
     &lt;/div&gt;
     &lt;div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"&gt;
       &lt;div class="panel-body"&gt;
      &lt;p&gt;some text&lt;/p&gt;
       &lt;/div&gt;
     &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="col-md-6"&gt;
      &lt;div class="panel panel-default"&gt;
     &lt;div class="panel-heading" role="tab" id="headingThree"&gt;
       &lt;h4 class="panel-title"&gt;
      &lt;a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"&gt;
        &lt;center&gt;some text&lt;/center&gt;&lt;/a&gt;
       &lt;/h4&gt;
     &lt;/div&gt;
     &lt;div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"&gt;
       &lt;div class="panel-body"&gt;
      &lt;p&gt;some text&lt;/p&gt;
       &lt;/div&gt;
     &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="panel panel-default"&gt;
     &lt;div class="panel-heading" role="tab" id="headingFour"&gt;
       &lt;h4 class="panel-title"&gt;
      &lt;a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"&gt;
        &lt;center&gt;some text&lt;/center&gt;&lt;/a&gt;
       &lt;/h4&gt;
     &lt;/div&gt;
     &lt;div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"&gt;
       &lt;div class="panel-body"&gt;
      &lt;p&gt;some text&lt;/p&gt;
      &lt;a class="bodlink" href="#"&gt;some text&lt;/a&gt; some text
       &lt;/div&gt;
     &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="panel panel-default"&gt;
     &lt;div class="panel-heading" role="tab" id="headingFour"&gt;
       &lt;h4 class="panel-title"&gt;
      &lt;a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive"&gt;
        &lt;center&gt;some text&lt;/center&gt;&lt;/a&gt;
       &lt;/h4&gt;
     &lt;/div&gt;
     &lt;div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive"&gt;
       &lt;div class="panel-body"&gt;
      &lt;p&gt;some text&lt;/p&gt;
      &lt;p&gt;some text&lt;/p&gt;
      &lt;p&gt;some text&lt;/p&gt;
       &lt;/div&gt;
     &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/hr&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm calling the CSS, JQuery &amp; JS as follows:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
  &lt;script src="//code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>What have I missed?</p>