Аккордеон с циклом 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>
!