Add panels to Bootstrap 3 accordion dynamically

Question

I am trying to add Bootstrap 3 panels to an accordion dynamically. My (relevant) code is given below:

<div class="panel-group" id="queues-accordion">
</div>

and the JS code:

$("#addqueuebutton").on("click",function(){
    var queue = '<div class="panel panel-default">';
    queue += '<div class="panel-heading">';
    queue += '<h4 class="panel-title">';
    queue += '<a data-toggle="collapse" data-parent="queues-accordion" href="collapse1">' + $('#queuename').val() + '</a>';
    queue += '</a>';
    queue += '</h4>';
    queue += '</div>';
    queue += '<div id="collapse1" class="panel-collapse collapse in">';
    queue += '<div class="panel-body">' + This is a test + '</div>';
    queue += '</div>';
    queue += '</div>';
    $('#queues-accordion').append(queue);
})

I followed this guide - Add dynamic closed panels in Bootstrap 3 accordion , but I am not getting the panel to appear on the page. Can anyone point out my mistake please?

Answer 1

The following line is invalid

queue += '<div class="panel-body">' + This is a test + '</div>';

This is a test is a string and should be added like a string. Javascript will interpret it like a variable (which is again invalid).

Something like this should work instead

queue += '<div class="panel-body">This is a test</div>';

or store This is a test as a variable and concatenate it

var test = 'This is a test';
queue += '<div class="panel-body">' + test + '</div>';