Bootstrap 5.3 Аккордеон, игнорирующий data-bs-parent

Я пытаюсь создать аккордеон, в котором заголовки находятся в левом столбце, а при раскрытии содержимое появляется в правом столбце. Это работает отлично, за исключением того, что мне приходится снова нажимать на заголовок, чтобы закрыть его, как в примере "Always Open" на https://getbootstrap.com/docs/5.3/components/accordion/, несмотря на наличие 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>

Элемент data-bs-parent должен содержать элементы accordion-item. Ваш код использует id="catAccordion" в качестве родителя, но там нет элементов аккордеона, и поэтому Bootstrap ничего не делает. Вы можете легко решить эту проблему, переместив id во внешний содержащий div, как показано на рисунке:

<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/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

Вернуться на верх