Аккордеон с циклом for для одновременного открытия только одного элемента

Я пытаюсь добавить интерактивный id к моему аккордеону, но что-то не так в моем коде и аккордеон открывает каждый элемент аккордеона, все, что я хочу, это иметь возможность открывать один элемент аккордеона за раз при нажатии на него.

    {% for study in studies %} <div class="accordion" id="accordionExample">
 <div class="accordion-item">
    <h2 class="accordion-header" id="heading{study.uid}">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" 
 data-bs- target="#collapse{study.uid}" aria-expanded="true" aria- 
controls="collapse{study.uid}">
            {{ study.uid }}
        </button>
    </h2>
    <div id="collapse{study.uid}" class="accordion-collapse collapse" aria- 
labelledby="heading{study.uid}" data-bs-parent="#accordionExample">
        <div class="accordion-body">
            text
        </div> </div> </div>
{% endfor %}

Все ваши элементы аккордеона абсолютно одинаковы, если вы хотите, чтобы шаблон показывал только первый, тогда вы можете использовать {{ forloop0.counter }}, чтобы установить различные данные для n-го аккордеона и скрыть остальные с помощью любого метода, который вы используете для переключения видимости аккордеона.

При таком форматировании ваш For loop создает столько accordions, сколько существует studies. Попробуйте выполнить цикл только на accordion-item, как показано ниже :

<div class="accordion" id="accordionExample">
{% for study in studies %}
 <div class="accordion-item">
    <h2 class="accordion-header" id="heading{study.uid}">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" 
 data-bs- target="#collapse{study.uid}" aria-expanded="true" aria-controls="collapse{study.uid}">
            {{ study.uid }}
        </button>
    </h2>
    <div id="collapse{study.uid}" class="accordion-collapse collapse" aria-labelledby="heading{study.uid}" data-bs-parent="#accordionExample">
        <div class="accordion-body">
            text
        </div>
    </div>
  </div>
{% endfor %}
</div>

Также не забудьте закрыть все свои <div>!

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