Dynamische neue Panel hinzufügen Akkordeon Bootstrap

Question

ich eine Funktion, um dynamische Hinzufügen neuer Platte schreiben Bootstrap Akkordeon und es funktioniert

der Plattenkörper zeigen Mein Problem ist, invertiert unter

das Bild zu sehen und zu wenn ich den gleichen Code in jsfiddle versuchen arbeiten, um es fein https://jsfiddle.net/Eadhassan/aqpbzcex/1/

das ist mein HTML-Code:

<button class="btn btn-default btn-block addPanel" type="button">Add panel</button> 
<div class="panel-group panels" id="accordion" role="tablist" aria-multiselectable="false"></div> 

Dies ist mein jQuery-Code:

<script type="text/javascript"> 
    $('.addPanel').click(function() { 
     var x = $('.panels .panel').length+1; 
     var template = '<div class="panel panel-primary">'; 
     template += '<div class="panel-heading" role="tab">'; 
     template += '<h4 class="panel-title">'; 
     template += '<a data-toggle="collapse" href="#' + x + '" aria-expanded="false" aria-controls="collapseOne">Panel ' + x + '</a>'; 
     template += '<a id="removeSlide" style="cursor: pointer" class="pull-right" data-toggle="tooltip" data-placement="top" title="Delete this"><i class="fa fa-lg fa-trash"></i></a>'; 
     template += '</h4></div>'; 
     template += '<div id="' + x + '" class="panel-collapse collapse" role="tabpanel"><div class="panel-body">'; 

     // Title 
     template += '<div class="form-group">'; 
     template += '<div class="row">'; 
     template += '<label class="form-label col-md-5" for="slideTitle">title</label>'; 
     template += '<div class="col-md-7">'; 
     template += '<input type="text" name="sliderSource[' + x + '][slideTitle]" id="slideTitle" class="form-control">'; 
     template += '</div></div></div>'; 

     // Description 
     template += '<div class="form-group">'; 
     template += '<div class="row">'; 
     template += '<label class="form-label col-md-5" for="slideTitle">Description</label>'; 
     template += '<div class="col-md-7">'; 
     template += '<textarea name="sliderSource[' + x + '][slideTitle]" id="slideTitle" class="form-control"></textarea>'; 
     template += '</div></div></div>'; 

     // Close open tags 
     template += '</div></div></div>'; 

     $('.panels').append(template); 
    }); 
</script> 

Jeder Körper hatte dieses Problem vor

Answer 1

ich mein Problem gelöst es in CSS-Datei für eine Rolle dreht Zusammenbruch Taste vielen Dank war @ Mohamed- Yousef