I am in the process of building an accordion group with bootstrap 3. Here is the code I have so far:
<div id="accordion" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<h3>Purchase No: 123 </h3>
</a>
</div>
</div>
<div id="collapse1" class="panel-collapse collapse">
content here
</div>
</div>
</div>
Everything works as expected when I expand the accordion, but upon trying to close it by clicking again, it collapses and then immediately expands back.
The issue seems to be tied to the following element within the code:
<div id="collapse1" class="panel-collapse collapse in">
When in this state, the accordion appears closed, but a brief "bouncy" animation occurs when closing it, causing it to remain open. The classes "collapsing" and "in" are added and removed during this process, resulting in the unpredictable behavior.
Does anyone have any suggestions or solutions for resolving this issue?