Bootstrap5 Dynamic Accordion Card Collapse

Front End Components
#1

Hello

I have set up an BS5 accordion with repeat data feeding the header and body of cards for an FAQ in a PHP webapp. Buttons to the left of the accordion filter the cards into one of four categories.

My problem : when a user clicks on any header, all cards open/collapse as opposed to just the specific card.

My code :

<div class="container">
  <div class="row">
    <div class="col">
      <button id="btnFAQgeneral" class="btn w-100 mt-3 mb-3 btn-lg btnFAQ shadow" dmx-on:click="varFAQ.setValue('General');serverconnectFaq.load({})">General</button>
      <button id="btnFAQapplicants" class="btn w-100 mt-3 mb-3 btn-lg btnFAQ shadow" dmx-on:click="varFAQ.setValue('Applicants');serverconnectFaq.load({})">Applicants</button>
      <button id="btnFAQclients" class="btn w-100 mt-3 mb-3 btn-lg btnFAQ shadow" dmx-on:click="varFAQ.setValue('Clients');serverconnectFaq.load({})">Clients</button>
      <button id="btnFAQothers" class="btn w-100 mt-3 mb-3 btn-lg btnFAQ shadow" dmx-on:click="varFAQ.setValue('Others');serverconnectFaq.load({})">Others</button>
    </div>

    <div class="col">
      <div class="accordion" key="id" is="dmx-repeat" id="accordion1" dmx-bind:repeat="serverconnectFaq.data.queryFaq.where(`type`, varFAQ.value, '==')">
        <div class="card" style="decoration: none;">
          <div class="card-header" id="accordion1_headingOne">
            <h5 class="mb-0">
              <button id="accordion1_collapseOne_Btn" class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#accordion1_collapseOne" aria-expanded="true" aria-controls="collapseOne" dmx-text="question +$index">question</button>
            </h5>
          </div>
          <div id="accordion1_collapseOne" class="collapse" is="dmx-bs5-collapse" aria-labelledby="accordion1_headingOne" data-parent="#accordion1">
            <div class="card-body">
              <p class="card-text ps-3" dmx-text="answer">answer</p>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Have reviewed other posts, but have failed in all attempts to make the header data target and card ID unique despite manually adding the dmxBootstrap5Collapse.js script.

Any guidance would be much appreciated.

Thank you.

#2

Hey @sanjco,

Please check that @ben’s video and pay attention at 2:50
Dynamic Accordion - YouTube

#3

@famousmag, the video is crystal clear - my accordion is working as it should.
Thank you!!

1 Like