title: Bootstrap Collapse Accordion: Opening a panel by JavaScript does not close other open panels
body: <p>I have an accordion which uses Bootstrap Collapse. When I click on any panel, it opens it and closes other open panels. But when I try to open a panel using JavaScript, other open panels does not close automatically. </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-js lang-js prettyprint-override"><code>function openBreakfast() {
   $('#add-breakfast-form').collapse('show');
  }
  
  function openLunch() {
   $('#add-lunch-form').collapse('show');
  }
  
  function openDinner() {
   $('#add-dinner-form').collapse('show');
  }
  
  function openSnacks() {
   $('#add-snacks-form').collapse('show');
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    padding: 20px;
  }
  
  .m-t-20 {
    margin-top: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;div id="food-tracker-accordion" role="tablist" class="panel-group m-t-20"&gt;
    &lt;div class="panel panel-default"&gt;
      &lt;div role="tab" class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-breakfast-form"&gt;Add Breakfast&lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="add-breakfast-form" role="tabpanel" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;
          Add Breakfast form
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="panel panel-default"&gt;
      &lt;div role="tab" class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-lunch-form"&gt;Add Lunch&lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="add-lunch-form" role="tabpanel" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;
          Add Lunch form
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="panel panel-default"&gt;
      &lt;div role="tab" class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-dinner-form"&gt;Add Dinner&lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="add-dinner-form" role="tabpanel" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;
          Add Dinner form
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="panel panel-default"&gt;
      &lt;div role="tab" class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-snacks-form"&gt;Add Snacks&lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="add-snacks-form" role="tabpanel" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;
          Add Snacks form
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="m-t-20"&gt;
    &lt;button onclick="openBreakfast()"&gt;Open Breakfast&lt;/button&gt;
    &lt;button onclick="openLunch()"&gt;Open Lunch&lt;/button&gt;
    &lt;button onclick="openDinner()"&gt;Open Dinner&lt;/button&gt;
    &lt;button onclick="openSnacks()"&gt;Open Snacks&lt;/button&gt;
  &lt;/div&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>
  
  <p>Another interesting thing is that if I click on any panel to close, opening that panel by JavaScript closes all other open panels.</p>