How to make Twitter Bootstrap Collapse work on dynamically loaded html using javascript

Question

I am loading html using javascript call, this html has Bootstrap Collapse.

<li class="dd-item" data-id="home">
<div id="panel1" class="panel panel-default panel-collapsed">
    <div class="panel-heading">
        <div class="panel-actions">
            <a role="button" data-collapse="#panel1"  class="btn btn-sm btn-icon">
                <i class="icon ion-chevron-down"></i>
            </a>
        </div>
        <h3 class="panel-title">Home</h3>
    </div>
    <div class="panel-body" style="display: none;">
        <p>some text</p>
    </div>
</div>
</li>

Answer 1

data-toggle="collapse" and data-target="#id" are what you need to be able your bootstrap will work, data-toggle="collapse" will tell bootstrap for a collapse function while data-target="#text" point to the id of html tag that will perform toggle collapse.

In you code, replace this line,

  <a role="button" data-collapse="#panel1"  class="btn btn-sm btn-icon">

with

  <a role="button" data-collapse="#panel1"  class="btn btn-sm btn-icon" data-toggle="collapse" data-target="#text">

where #text is the div ID. In your

  <div class="panel-body" style="display: none;">

remove this inline css style style="display: none;" and put an id attribute id="#text" for example. Look like this,

<div id="text" class="collapse panel-body">

And there you go.