Bootstrap collapse not working properly

Question

I created a bootstrap accordion. There are certain elements in the accordion that alternate when expanded by clicking on a 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 loading the page, the first click on a certain element leads to the successful expansion of the .accordion-body .collapse , but successive calls do not lead to expansion.

Extension results by adding a class called in dynamically. Even with successive clicks on the accordion elements, the check shows the in class is overturned, as it should be, but despite this, the element does not expand.

Please suggest what might be the problem.

Answer 1

I understood the problem. In fact, the jQuery plugin for collapse requires the inclusion of the bootstrap-transition plugin. I tried either "only" bootstrap-collapse , which caused the indicated problem, or full bootstrap.js , which caused other problems.