Jquery forループで生成されたブートストラップパネルの崩壊が機能しない

Question

forループを使用してJqueryを使用して複数のブートストラップパネルを作成しました。

問題は、タブパネルが機能していないことです。パネルの本体を展開したり折りたたんだりできません。

JSFiddle

<div class="container-fluid text-center" name="drawing"> 
    <h2><b> TTT </b></h2> 
    <hr> 

    <div class="row"> 

    <div class="container-fluid text-center col-sm-2" name="filters"> 
     <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
     </div> 
    </div> 

    <div class="container-fluid text-center col-sm-10" name="chart"> 
     <span id="chart1"></span> 
    </div> 
    </div> 
    <hr> 
</div> 

JSコード：

var headingList = ["heading01", "heading02", "heading03", "heading04", "heading05", "heading06", "heading07", "heading08", "heading09", "heading10"]; 
var collapseList = ["collapse01", "collapse02", "collapse03", "collapse04", "collapse05", "collapse06", "collapse07", "collapse08", "collapse09", "collapse10"]; 
var labelList = ["v1", "v2", "v3", "v4", "v5", "v6", "v7", "v8", "v9", "v10"]; 
var filterList = ["f1", "f2", "f3", "f4", "f5", "f6", "f7", "f8", "f9", "f10"]; 

var i = 0, 
    len = headingList.length; 
for (i; i < len; i += 1) { 
    console.log(headingList[i]); 
    console.log(collapseList[i]); 
    console.log(labelList[i]); 
    console.log(filterList[i]); 
    $("#accordion").append(
    '<div class="panel panel-default">' + 
    '<div class="panel-heading" role="tab" id=' + headingList[i] + '>' + 
    '<h4 class="panel-title">' + 
    '<a role="button" data-toggle="collapse" data-parent="#accordion" href=' + collapseList[i] + ' aria-expanded="true" aria-controls=' + collapseList[i] + '>' + 
    labelList[i] + 
    '</a>' + 
    '</h4>' + 
    '</div>' + 
    '<div id=' + collapseList[i] + ' class="panel-collapse collapse" role="tabpanel" aria-labelledby=' + headingList[i] + '>' + 
    '<div class="panel-body">' + 
    '<select multiple id=' + filterList[i] + ' size="10"></select><br>' + 
    '</div>' + 
    '</div>' + 
    '</div>' 
) 
}; 

感謝。

Answer 1

は、あなただけのタグhref属性が

だからあなたのJSコードで

<a role="button" data-toggle="collapse" data-parent="#accordion" href=#' + collapseList[i] + ' aria-expanded="true" aria-controls=' + collapseList[i] + '> 

で

<a role="button" data-toggle="collapse" data-parent="#accordion" href=' + collapseList[i] + ' aria-expanded="true" aria-controls=' + collapseList[i] + '> 

を交換#<a>に追加逃し

Working jsfiddle