title: Boostrap Accordion cannot collapse
body: <p>Recently, I am building a new project using bootstrap accordion. When I click the heading, at first I will add some extra content into panel and then open the panel and close other panels. But when I add the extra content and invoke <code>.collapse('show')</code> function, other accordion element doesn't close. Can somebody explain the reason?  Thank you!</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;title&gt;Accordion&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;!--&lt;button id="item1"&gt;item1&lt;/button&gt;--&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 class="collapsed" id="item1" role="button" data-parent="#accordion" data-toggle="collapse"&gt;
              Collapsible Group Item #1
            &lt;/a&gt;
          &lt;/h4&gt;
        &lt;/div&gt;
        &lt;div id="collapseOne" class="panel-collapse collapse"&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"&gt;
              Collapsible Group Item #2
            &lt;/a&gt;
          &lt;/h4&gt;
        &lt;/div&gt;
        &lt;div id="collapseTwo" class="panel-collapse collapse"&gt;
          &lt;div class="panel-body"&gt;
            Anim pariatur cliche 
          &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"&gt;
              Collapsible Group Item #3
            &lt;/a&gt;
          &lt;/h4&gt;
        &lt;/div&gt;
        &lt;div id="collapseThree" class="panel-collapse collapse"&gt;
          &lt;div class="panel-body"&gt;
            Anim pariatur cliche reprehenderit, 
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      $(function() {
        $('#item1').click(function() {
          $('#collapseOne').append(`
            &lt;div class="panel-body"&gt;
              &lt;p&gt;asdfsdf&lt;/p&gt;
              &lt;p&gt;sdafweff&lt;/p&gt;
              &lt;p&gt;dsafsdaf&lt;/p&gt;
              &lt;p&gt;dsafwer&lt;/p&gt;
            &lt;/div&gt;
          `);
          $('#collapseOne').collapse('show');
        })
      })
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>