OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Bootstrap 5.3 Accordion ignoring data-bs-parent

  • Thread starter Thread starter Ayukawa
  • Start date Start date
A

Ayukawa

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

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

<p>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 <a href="https://getbootstrap.com/docs/5.3/components/accordion/" rel="nofollow noreferrer">https://getbootstrap.com/docs/5.3/components/accordion/</a> despite having data-bs-parent populated.</p>
<pre><code><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>
</code></pre>
 
Top