Accordéon bootstrap avec un foreach

Par yonea80, il y a 4 ans

Les bases HTML/CSS
PHP
Javascript

Bonjour tous le monde,

J'essaie de faire fonctionner un accordéon avec une boucle foreach a l'intérieur pour afficher mes données, cependant tous mes accordéons s'ouvraient en meme temps, mais j'ai appris que cela été du a fait que la l'id de ma div était toujours la meme, j'ai donc essayé une méthode pour avoir un id dynamique mais cela n'a pas résolu mon probleme, voir pire mes accordéons ne s'ouvrent pas.

Auriez vous une solution pour mon probleme s'il vous plait ? merci et bonne journée
voici mon code :

<div class="accordion mb-5" id="accordion-infos"> <f:for each="{field.container}" as="container"> <!-- foreach bouton contenu --> <div class="card"> <div class="card-header" id="heading1-{container.buttoncontent}"> <h2> <button class="accordion-button btn btn-link btn-block text-left" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne-{container.buttoncontent}" aria-expanded="true" aria-controls="collapseOne-{container.buttoncontent}"> {container.buttoncontent} </button> </h2> </div> <div id="collapseOne-{container.buttoncontent}" class="accordion-collapse collapse" aria-labelledby="heading1-{container.buttoncontent}" data-bs-parent="#accordion-infos"> <div class="card-body"> <div class="section-card"> <div class="row"> <div class="col-lg-6 col-md-6"> <f:format.raw>{container.content}</f:format.raw> </div><!-- col-lg-6 col-md-6--> </div><!-- row--> </div><!-- section card --> </div> <!-- card body --> </div> <!-- collapsOne --> </div> <!-- card --> </f:for><!-- endfor bouton contenu--> </div><!-- accordion mb-5 -->

1 réponse

Arzou, il y a 4 ans

Si tu initialise une variable a 1 par exemple, en début de boucle, et que tu itère a chaque passage dans ta boucle, tu peux t'en servir pour générer tes ID.
Par exemple ta variable s'appellera $i, et tes ID serons heading-$i, tu coup tes ID serons heading-1, heading-2 etc etc :)

Sinon tu peux te servir des clés dans le foreach et t'en servir à la place de $i pour générer tes ID uniques