Bootstrap 5.3 Accordion ignoring data-bs-parent

Question

I'm trying to create an accordion where the headers are in a left-side column and when expanded the content appears in a right-side column. This works perfectly except I'm having to click on a header again to close it as per the "Always Open" example on https://getbootstrap.com/docs/5.3/components/accordion/ despite having data-bs-parent populated.

<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>

Answer 1

The data-bs-parent element must contain the accordion-item elements. Your code uses id="catAccordion" as the parent, but there are no accordion items there and so Bootstrap does nothing. You can easily fix the problem by moving the id to the outer containing div as shown:

<div class="row justify-content-center" id="catAccordion">
  <div class="col-4">
    <div class="accordion accordion-flush" >
      <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_t1">
          <h5>Title 1</h5>
          </button>
        </h2>
      </div>
      <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_t2">
          <h5>Title 2</h5>
          </button>
        </h2>
      </div>
      <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_t3">
            <h5>Title 3</h5>
            </button>
        </h2>
      </div>
    </div>
  </div>
  <div class="col-6">
    <div id="collapse_t1" class="accordion-collapse collapse" data-bs-parent="#catAccordion">
      <div class="accordion-body">Title 1 Content</div>
    </div>
    <div id="collapse_t2" class="accordion-collapse collapse" data-bs-parent="#catAccordion">
      <div class="accordion-body">Title 2 Content</div>
    </div>
    <div id="collapse_t3" class="accordion-collapse collapse" data-bs-parent="#catAccordion">
      <div class="accordion-body">Title 3 Content</div>
    </div>
  </div>
</div>



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>