title: How to display multiple accordions open in bootstrap v3.3.7?
body: <p>I am using Bootstrap v3.3.7. I am displaying accordion which is working. When the page load first accordion will open. Now when I click on second then the previous one accordion is close that I don't want. I need when the user clicks on accordion which is open that will close.  In short, I have to display multiple accordions open.</p>
  
  <p>This is the example I am using on my code <a href="https://getbootstrap.com/docs/3.3/javascript/#collapse-example-accordion" rel="nofollow noreferrer">https://getbootstrap.com/docs/3.3/javascript/#collapse-example-accordion</a></p>
  
  <p>In this, the first accordion is open and if you click on second then it will close the previous open accordion.</p>
  
  <p>I need, On page load first accordion is open and if click on second the opne the second accordion but I don't want to close the previous one.</p>
  
  <p>I am using below code. Would you help me out in this?</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;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  
  &lt;div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false"&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;
            Collapsible Group Item #1
          &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;
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
        &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;
            Collapsible Group Item #2
          &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;
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&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;
            Collapsible Group Item #3
          &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;
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia 
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>