title: Bootstrap accordion not working
body: <p>I've been trying to make a collapse accordion to work, but when i click the links nothing happens, the other items are not expanding and the first is not collapsing. The body is split in 3 columns (1-10-1) and the accordion is placed in the middle. I'm using bootstrap 3.3.7 and jquery 3.2.1. Is this happening due to how my tags are laid, or is something to do with jquery?</p>
  
  <p>HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;!-- Body --&gt;
      &lt;div class="container"&gt;
  
          &lt;div  class="row"&gt;
  
              &lt;div class="col-lg-1"&gt;&lt;/div&gt;
              &lt;div class="col-lg-10"&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="heading1"&gt;
                              &lt;h4 class="panel-title"&gt;
                                  &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1"&gt;
                                      Panel 1
                                  &lt;/a&gt;
                              &lt;/h4&gt;
                          &lt;/div&gt;
                          &lt;div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1"&gt;
                              &lt;div class="panel-body"&gt;
                                  &lt;p&gt;Text for 1&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="heading2"&gt;
                              &lt;h4 class="panel-title"&gt;
                                  &lt;a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2"&gt;
                                      Panel 2
                                  &lt;/a&gt;
                              &lt;/h4&gt;
                          &lt;/div&gt;
                          &lt;div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2"&gt;
                              &lt;div class="panel-body"&gt;
                                  &lt;p&gt;Text for 2&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
              &lt;div class="col-lg-1"&gt;&lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt; &lt;!-- Body --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>