mi problema inicial fue que mis acordeones se abrían todos al mismo tiempo pero entendí que venía del Id que era el mismo todo el tiempo.
Así que traté de hacer que mi identificación sea dinámica, pero eso no resolvió mi problema. tendrias una solucion por favor gracias
aquí está mi código:
<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 -->usar cualquier texto editable como ID con restricciones es una mala idea en general. para acordeones o construcciones similares, siempre debe usar el uid de TYPO3. O al menos el iterator.index de un bucle.
Como podría tener varios acordeones en una página, debe combinarlos.
por lo que su ID debe consistir en el uid del contenedor y los uid de los elementos contenidos.
Algo como: id="container-{data.uid}-{element.uid}"
o
<f:for each="{field.container}" as="container" iteration="iterator"> : <div class="card-header" id="container-{data.uid}-{iterator.index}"`> : <div id="collapseOne-{data.uid}-{iterator.index}" ... :