Dynamic accordion cards

Wappler General Need Help
1

I followed @ben tutorial three times, but can't get it to work. Console says "BaseComponent.js:285 Unknown component found! bs5-collapse"
This is my code:

                            <div class="card">
                                <div class="card-header" id="'accordion1_heading'+$index">
                                    <h1 class="h5">{{titel}}</h1>
                                    <p>Datum {{datum.formatDate('dd-MM-yyyy')}} <span dmx-show="!datum.isEmpty()">Aanvang: {{aanvang}} uur</span><br>
                                        <span>Waar: {{locatie}}</span><br>
                                        <span>{{omschrijving_kort}}</span>
                                    </p>

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

                                </div>
                                <div id="'accordion1_collapse'+$index" class="collapse" is="dmx-bs5-collapse" dmxbind:aria-labelledby="accordion1_heading{{$index}}" data-bs-parent="#accordion1">
                                    <div class="card-body">
                                        <p class="card-text" dmx-html="omschrijving_lang"></p>
                                    </div>
                                </div>
                            </div>
                        </div>```
2

Try adding an accordion to the page through the Wappler UI and save the file - just so that the head page has the necessary includes added to the head. you can then remove it again afterwards.

3

Thanks. It appears I had to add "Dynamic collapse" to the page.
Working now as expected.

1 Like