Bootstrap 3: Accordion body collapses before content is hidden
I have an accordion crash problem. It used to work fine, but it broke at some point in time, and I'm not entirely sure if this is due to a Bootstrap 3 update. I recently re-wrote half of the project, so chances are that this is what I accidentally did.
I am creating a fairly large accordion with KnockoutJS. It fills the groups / panels and they open as expected, but when I try to collapse the group the content of the group is shifted to the top of the containing container, then the group collapses, but its content still lingers for about a second until it finally disappears. And I get the expected result - a crashed accordion.
<div id="accordion" class="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse">Title Here</a>
</div>
<div class="accordion-body collapse">
<div class="accordion-inner">
Content Here
</div>
</div>
</div>
</div>
I also tried using the example below from the Bootstrap documentation to eliminate the problem with my CSS and only use them, but it produced the same result. The accordion group content is delayed for about a second while the actual group has already collapsed.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
</div>
</div>
</div>
</div>
I also tried to reduce the content of the accordion group to one line of text. The question still remained.
Any idea how to get around this?
Thank.
source to share
Most likely you need to revert to an older version of the bootstrap. If you use any of their demo as a starter. Before updating the framework, you must start with an updated demo / template. Typically the template is more backward compatible than bootstrap css. This is pretty tiresome.
source to share