与for循环一致，一次只能打开一个项目

Question

我正在尝试向我的手风琴添加一个交互式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 %}

Answer 1

所有手风琴元素都完全相同，如果希望模板仅显示第一个元素，则可以使用{forloop0.counter}}为第n个手风琴设置不同的数据，并使用任何方法隐藏其余元素，以切换哪个手风琴可见。