accordion with for loop to only open one item at a time-CodePudding

I am trying to add an interactive id to my accordion, but something is off in my code and the accordion opens every accordion item, all I want is to be able to open one accordion item at a time when clicking on it.

    {% for study in studies %} <div  id="accordionExample">
 <div >
    <h2  id="heading{study.uid}">
        <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}"  aria- 
labelledby="heading{study.uid}" data-bs-parent="#accordionExample">
        <div >
            text
        </div> </div> </div>
{% endfor %}

CodePudding user response：

All of your accordion elements are exactly the same, if you want the template to only show the first one then you can use {{ forloop0.counter }} to set different data for the nth accordion and hide the rest with whatever method you are using to toggle which accordion is visible.

CodePudding user response：

Thus formatted, your For loop creates as many accordions as there are studies. Try to loop only on accordion-item as shown below :

<div  id="accordionExample">
{% for study in studies %}
 <div >
    <h2  id="heading{study.uid}">
        <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}"  aria-labelledby="heading{study.uid}" data-bs-parent="#accordionExample">
        <div >
            text
        </div>
    </div>
  </div>
{% endfor %}
</div>

Also be sure to close all your <div>!