Bootstrap accordion with a foreach loop-CodePudding

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  id="accordion-infos">
  <f:for each="{field.container}" as="container"> 
    <!-- foreach bouton contenu -->
    <div >
      <div  id="heading1-{container.buttoncontent}">
        <h2>
          <button  
                  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}" 
            
           aria-labelledby="heading1-{container.buttoncontent}" 
           data-bs-parent="#accordion-infos">
        <div >
          <div >
            <div >
              <div >
                <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 -->

CodePudding user response：

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  id="container-{data.uid}-{iterator.index}"`>
      :
      <div id="collapseOne-{data.uid}-{iterator.index}" ...
        :