my initial problem was that my accordions all opened at the same time but I understood that it was coming from the Id which was the same all the time.
So I tried to make my ID dynamic but that didn't solve my problem. would you have a solution please? thank you
here is my 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 -->
using any editable text as an ID with restrictions is a bad idea in general.
for accordions or similar construction you always should use the uid from TYPO3. Or at least the iterator.index of a loop.
As you could have multiple accordions in one page you should combine it.
so your ID should consist of the uid of the container and the uids of the contained elements.
Something like: id="container-{data.uid}-{element.uid}"
or
<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}" ...
: