Add dynamic closed panels in Bootstrap 3 accordion

Question

I use Bootstrap 3 accordion and I need to add dynamic panels into it. I have something like this:

+------------------+
| Panel 1 (closed) |
+----------------         


        

Answer 1

I just added addClass("collapse") on this line:

$newPanel.find(".panel-collapse").attr("id", hash).addClass("collapse").removeClass("in");

var $template = $(".template");

var hash = 2;
$(".btn-add-panel").on("click", function () {
    var $newPanel = $template.clone();
    $newPanel.find(".collapse").removeClass("in");
    $newPanel.find(".accordion-toggle").attr("href",  "#" + (++hash))
             .text("Dynamic panel #" + hash);
    $newPanel.find(".panel-collapse")
             .attr("id", hash)
             .addClass("collapse")
             .removeClass("in");
    $("#accordion").append($newPanel.fadeIn());
});

Fiddle DEMO