Сворачивание содержимого аккордеона в django for loop

Я пытаюсь реализовать цикл for в моем аккордеоне. Все вроде бы хорошо, за исключением того, что когда я нажимаю на 3-ю или 4-ю кнопку, то другие тела остаются развернутыми. Это должно работать точно так же, как в первом примере в документации Bootstrap так что если вы нажмете на Accordion Item #2, то Accordion Item #1 и Accordion Item #3 свернутся.

Я уверен, что проблема в моем {% if forloop.first %}, но я не уверен, как я могу динамически изменить это, чтобы свернуть все содержимое аккордеона, кроме активного.

Мой код: 

  {% for category in top_categories %}
  <div class="accordion" id="accordionExample">
    <div class="accordion-item">
      <h2 class="accordion-header" id="heading{{category.id}}">
        <button class="accordion-button" type="button" data-bs-toggle="collapse"
          data-bs-target="#collapse{{category.id}}" aria-expanded="false" aria-controls="collapse{{category.id}}">
          {{category.title}}
        </button>
      </h2>
      <div id="collapse{{category.id}}" class="accordion-collapse {% if forloop.first %} show {% else %} collapse {% endif %}" aria-labelledby="heading{{category.id}}"
        data-bs-parent="#accordionExample">
        <div class="accordion-body">
          {% for qa in category.qa.all|slice:"0:3" %}
              <a href="{{ qa.get_absolute_url }}">Q: {{qa}}</a><hr>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
  {% endfor %}

Я думаю, что основная проблема заключается в том, что вы включаете <div class "accordion" id="accordionExample"> внутрь цикла. Второстепенная заключается в том, что класс "collapse" также необходим для первой итерации. Попробуйте сделать так:

<div class="accordion" id="accordionExample">
  {% for category in top_categories %}
    <div class="accordion-item">
      <h2 class="accordion-header" id="heading{{category.id}}">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{category.id}}" aria-expanded="true" aria-controls="collapse{{category.id}}">
          {{category.title}}
        </button>
      </h2>
      <div id="collapse{{category.id}}" class="accordion-collapse collapse {% if forloop.first %}show{% endif %}" aria-labelledby="heading{{category.id}}" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          {% for qa in category.qa.all|slice:"0:3" %}
            <a href="{{ qa.get_absolute_url }}">Q: {{qa}}</a><hr>
          {% endfor %}
        </div>
      </div>
    </div>
  {% endfor %}
</div>
Вернуться на верх