John Davidson

Message:

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 -->

---

My Answer:
Sure, one way to solve this issue is to generate unique IDs for each accordion element in your foreach loop. You can achieve this by appending a unique identifier to the ID of each accordion element. Here's an example of how you can do this:

html

$item) { ?>

In this code snippet, we are appending the `$key` variable to the IDs of the accordion elements to make them unique. This way, each accordion element will have a unique ID and will not interfere with the others when opening or closing.

I hope this helps! Let me know if you have any other questions.