Question

I have created an accordion with bootstrap collapse. There are certain elements in accordion that alternate on expansion on click of the particular element. The following markup is created:

    <div class="accordion" id="accordion2">

        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" href="#collapse-0" id="0" data-toggle="collapse" data-parent="#accordion2">
                   User Visits
                </a>
            </div>
            <div id="collapse-0" class="accordion-body collapse in">
                <div class="accordion-inner">
                    Collapsible <br/>
                    Collapsible <br/>
                </div>
            </div>
        </div>

        <div class="accordion-group">                   
            <div class="accordion-heading">
                <a class="accordion-toggle" href="#collapse-1" id="1" data-toggle="collapse" data-parent="#accordion2">
                    Points
                </a>
            </div>                  
            <div id="collapse-1" class="accordion-body collapse">
                <div class="accordion-inner">
                    Collapsible <br/>
                    Collapsible <br/>
                </div>
            </div>
        </div>

    </div>

The problem is that after the page loads the first click on a particular element results in successful expansion of the .accordion-body .collapse block but successive calls do not result into any expansion.

The expansion results due to addition of a class called in dynamically. Even on the successive clicks on accordion elements the inspection shows the flipping of the in class as it should be but in spite of that the element doesn’t expand.

Answer 1

I’ve figured out the problem. Actually the collapse jquery plugin requires the inclusion of bootstrap-transition plugin. I tried with either ‘only’ bootstrap-collapse that caused the above problem or a full bootstrap.js that caused other issues.