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
4

I followed @ben tutorial video, but can't get dynamic accordion to work.
Below is the code. What have I done wrong?

'''




                                        <button dmx-bind:id="'accordion1_collapse'+$index'_Btn'" class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="accordion1_collapse{{$index}}" aria-expanded="true" dmx-bind:aria-controls="collapse{{$index}}">
                                            {{bedrijfsnaam}}
                                        </button>
                                    </h5>
                                </div>
                                <div dmx-bind:id="'accordion1_collapse'+$index" class="collapse" is="dmx-bs5-collapse" dmx-bind:aria-labelledby="accordion1_heading{{$index}}" data-bs-parent="accordion1" show="true">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col">
                                                <p>{{bedrijfsnaam}}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>''
5

Replace the button part with the following:

<button dmx-bind:id="'accordion1_collapse'+$index_Btn" class="btn btn-link" type="button" data-bs-toggle="collapse" dmx-bind:data-bs-target="#accordion1_collapse{{$index}}" aria-expanded="true" dmx-bind:aria-controls="collapse{{$index}}">
    {{bedrijfsnaam}}
</button>

PS: 't Soal heeft een nieuwe eigenaar. Ik denk dat Frank en Amanda (mijn nicht) nog steeds de beheerders zijn, zeker weet ik niet. Geniet van het mooie weer in Friesland.

1 Like
6

Ok, working now. So it was the # in the id.
Thanks @ben

1 Like