I am currently working on designing an accordion feature where the headers are displayed in a column on the left side, and when expanded, the content appears in a column on the right side. Everything is working perfectly except for the fact that I have to click on a header again to close it, similar to the "Always Open" example on https://getbootstrap.com/docs/5.3/components/accordion/, even though I have populated data-bs-parent.
<div class="row justify-content-center">
<!-- BEGIN LEFT SIDE -->
<div class="col-4">
<div class="accordion accordion-flush" id="catAccordion">
{% for topic in topic_list %}
<div class="accordion-item">
<h2 class="accordion-header" style="display:flex;">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_t{{ topic.id }}" aria-expanded="false" aria-controls="collapse_t{{ topic.id }}">
<h5>{{ topic.title }}</h5>
</button>
</h2>
</div>
{% endfor %}
</div>
</div>
<!-- END LEFT SIDE -->
<!-- BEGIN RIGHT SIDE -->
<div class="col-6">
{% for topic in topic_list %}
<div id="collapse_t{{ topic.id }}" class="accordion-collapse collapse" data-bs-parent="#catAccordion" aria-labelledby="head_t{{ topic.id }}">
<div class="accordion-body">{{ topic.id }} - {{ topic.title }}</div>
</div>
{% endfor %}
</div>
<!-- END RIGHT SIDE -->
</div>