title: Add dynamic closed panels in Bootstrap 3 accordion
body: <p>I use <a href="http://getbootstrap.com/javascript/#collapse-examples" rel="nofollow noreferrer">Bootstrap 3</a> accordion and I need to add dynamic panels into it. I have something like this:</p>
  <pre><code>+------------------+
  | Panel 1 (closed) |
  +------------------+
  | Panel 2 (opened) | &lt;-- This is the template panel
  | CONTENT          |
  +------------------+
  | Dynamic panels   | &lt;-- All dynamic panels must be closed, not opened
  +------------------+     after they are added
  </code></pre>
  <p>The issue is that if <em>Panel 2</em> is opened dynamic panels (cloned from <em>Panel 2</em>) are opened. If <em>Panel 2</em> is closed, dynamic panels are closed.</p>
  <p>I want all the dynamic panels to be closed and only when their headers are clicked they will  be opened (like in Bootstrap example). How can I fix it?</p>
  <p>This is my jQuery code.</p>
  <pre><code>var $template = $(&quot;.template&quot;);
  
  var hash = 2;
  $(&quot;.btn-add-panel&quot;).on(&quot;click&quot;, function () {
      var $newPanel = $template.clone();
      // I thought that .in class makes the panel to be opened
      $newPanel.find(&quot;.collapse&quot;).removeClass(&quot;in&quot;);
      $newPanel.find(&quot;.accordion-toggle&quot;).attr(&quot;href&quot;,  &quot;#&quot; + (++hash))
               .text(&quot;Dynamic panel #&quot; + hash);
      $newPanel.find(&quot;.panel-collapse&quot;).attr(&quot;id&quot;, hash);
      $(&quot;#accordion&quot;).append($newPanel.fadeIn());
  });
  </code></pre>
  <p><a href="https://jsfiddle.net/m5TMF/" rel="nofollow noreferrer"><strong>JSFiddle</strong></a></p>