Recently, I've encountered a problem with the accordion collapse feature. It was working perfectly before, but something caused it to break at some point in time. I suspect it may be related to upgrading Bootstrap 3 or changes I made while re-writing part of the project recently.
I am using KnockoutJS to create a large accordion. The groups/panels populate and open as expected, but when trying to collapse a group, the content shifts to the top of the container before eventually collapsing. Even after the group collapses, its content lingers for about a second before disappearing completely.
<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 tested using Bootstrap's documentation example to eliminate any issues with my CSS, yet the same lingering effect on the content persisted even when using their code snippet.
<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>
Even reducing the content of the accordion group to a single line did not resolve the issue.
If you have any suggestions on how to solve this problem, I would greatly appreciate it.
Thank you.