Initially, everything was functioning smoothly. However, after deleting some JS files and unused CSS, I encountered a problem with the accordion buttons not expanding. I thought my implementation didn't require JS, but I made sure to reintegrate all relevant JS components that were present when it was working.
I suspect that my issue lies in the absence of the necessary data-toggle in the CSS. The original CSS file does not contain any collapse toggles related to button or accordion classes, only .nav.
HTML:
<div class="card">
<div class="card-header py-4" id="heading-1-1" data-toggle="collapse" role="button" data-target="#collapse-1-1" aria-expanded="false" aria-controls="collapse-1-1">
<h6 class="mb-0"><i data-feather="file" class="mr-3"></i>Title</h6>
</div>
<div id="collapse-1-1" class="collapse" aria-labelledby="heading-1-1" data-parent="#accordion-1">
<div class="card-body">
<p>Text</p>
</div>
</div>
</div>
CSS:
.collapse:not(.show) {
display: none; }
.collapsing {
position: relative;
height: 0;
overflow: hidden;
transition: height 0.2s ease; }
@media (prefers-reduced-motion: reduce) {
.collapsing {
transition: none; } }