Menu
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.
Please suggest what could be the problem.
437
Bootstrap's collapse class exposes a few events for hooking into collapse functionality. This event fires immediately when the show instance method is called. This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
Just add data-bs-toggle="collapse" and a data-bs-target to the element to automatically assign control of one or more collapsible elements. The data-bs-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element.
In bootstrap context wise, accordion is basically a collapse button with a lot of smaller info in it. Bootstrap use card to make an accordion. on line 1, <div id="accordion" role="tablist"> , this is where the data-parent refers to. on line 2 <div class="card"> , we are using a card class, to show the card effect.
The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from its current value to 0 . Given how CSS handles animations, you cannot use padding on a .collapse element.
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.
193
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
