Shawn Shawn - 2 months ago 16
Javascript Question

Jquery for loop generated bootstrap panel collapse not working

I created multiple bootstrap panels using for loop with the help of Jquery.

The problem is that the tabpanel is not working, I am unable to expand nor collapse the panel body.

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 Code:

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>'
)
};


Thanks.

Answer

You just missed adding # to <a> tag href attribute

So replace

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

with

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

in your js code

Working jsfiddle

Comments