title: Bootstrap Accordion - Closing other panels when the intend is to open it's current panel
body: <p>I am attempting to create an accordion with Bootstrap. My intent is to click on a title and have it open and close the panel without having other panels be affected.</p>
  
  <p>In this situation, when I have panels 1 and 2/3 open and click to close 2 or 3, panel 1 ends up closing when it should not be affected at all.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('http://getbootstrap.com/dist/css/bootstrap.css');</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- jQuery library --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Latest compiled JavaScript --&gt;
  &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;!--  Experience  --&gt;
      &lt;section class="container experience"&gt;
          &lt;div class="row"&gt;
              &lt;h2&gt;Heading&lt;/h2&gt;
              &lt;div class="col-md-3"&gt;
                  &lt;span&gt;lorem &lt;/span&gt;
              &lt;/div&gt;
              &lt;!-- end of 1st column --&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;a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"&gt;
                                  &lt;h3 class="panel-title"&gt;Title1&lt;/h3&gt;
                              &lt;/a&gt;
                          &lt;/div&gt;
                          &lt;!-- end of panel title --&gt;
  
                          &lt;div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"&gt;
                              &lt;div class="panel-body"&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;Lorem ipsum&lt;/li&gt;
                                &lt;/ul&gt;
                              &lt;/div&gt;
                              &lt;!-- end of panel body --&gt;
                          &lt;/div&gt;
                          &lt;!-- end of panel collapse --&gt;
                      &lt;/div&gt;
                      &lt;!-- end of panel default --&gt;
                  &lt;/div&gt;
                  &lt;!-- end of accordion --&gt;
              &lt;/div&gt;
              &lt;!-- end of middle column --&gt;
  
              &lt;div class="col-md-3"&gt;
                  &lt;span&gt;blah&lt;/span&gt;
              &lt;/div&gt;
              &lt;!-- end of 3rd column --&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="col-md-3"&gt;
                  &lt;span&gt;lorem&lt;/span&gt;
              &lt;/div&gt;
              &lt;!-- end of 1st column --&gt;
  
              &lt;div class="col-md-6"&gt;
                  &lt;div class="panel panel-default"&gt;
                      &lt;div class="panel-heading" role="tab" id="headingTwo"&gt;
                          &lt;a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"&gt;
                              &lt;h3 class="panel-title"&gt;Title2&lt;/h3&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
                      &lt;!-- end of panel title --&gt;
  
                      &lt;div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"&gt;
                          &lt;div class="panel-body"&gt;
                              &lt;ul&gt;
                                 &lt;li&gt;Lorem ipsum&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                          &lt;!-- end of panel body --&gt;
                      &lt;/div&gt;
                      &lt;!-- end of panel collapse --&gt;
                  &lt;/div&gt;
                  &lt;!-- end of panel default --&gt;
              &lt;/div&gt;
              &lt;!-- end of middle column --&gt;
  
              &lt;div class="col-md-3"&gt;
                  &lt;span&gt;lorem&lt;/span&gt;
              &lt;/div&gt;
              &lt;!-- end of 3rd column --&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="col-md-3"&gt;
                  &lt;span&gt;lorem&lt;/span&gt;
              &lt;/div&gt;
              &lt;!-- end of 1st column --&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;a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree"&gt;
                              &lt;h3 class="panel-title"&gt;Title3&lt;/h3&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
                      &lt;!-- end of panel title --&gt;
  
                      &lt;div id="collapseThree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree"&gt;
                          &lt;div class="panel-body"&gt;
                              &lt;ul&gt;
                                      &lt;li&gt;Lorem ipsum&lt;/li&gt;                                                             &lt;/ul&gt;
                          &lt;/div&gt;
                          &lt;!-- end of panel body --&gt;
                      &lt;/div&gt;
                      &lt;!-- end of panel collapse --&gt;
                  &lt;/div&gt;
                  &lt;!-- end of panel default --&gt;
              &lt;/div&gt;
              &lt;!-- end of middle column --&gt;
  
              &lt;div class="col-md-3"&gt;
                  &lt;span&gt;lorem&lt;/span&gt;
              &lt;/div&gt;
              &lt;!-- end of 3rd column --&gt;
          &lt;/div&gt;
  
  
      &lt;/section&gt;
      &lt;!--    end of experience    --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also, how do I have the accordions closed by default when page loads?</p>