I don’t know if anyone will find this useful or if it will work on their side, but this worked on my side:
<div class="accordion" id="accordion1" is="dmx-repeat" dmx-bind:repeat="3">
<div class="card">
<div class="card-header" dmx-bind:id="card{{$index}}_heading">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" dmx-bind:data-target="{{"#"}}card{{$index}}_collapse" aria-expanded="false" aria-controls="collapse">
Collapsible Group Item #{{$index}}
</button>
</h5>
</div>
<div dmx-bind:id="card{{$index}}_collapse" class="collapse" is="dmx-bs4-collapse" dmx-bind:aria-labelledby="card{{$index}}_heading" data-parent="#accordion1">
<div class="card-body">
{{$index}}
</div>
</div>
</div>
</div>
Notes:
- This repeat will create 3 accordion cards based on
dmx-bind:repeat="3". It is for testing only, you can set it to your own. - It seems that in Wappler, if you want to dynamically bind any parameters, you just need to add
dmx-bind:to it.
e.g.
dmx-bind:aria-labelledby="card{{$index}}_heading"
produces the following in my example:
aria-labelledby="card0_heading"
aria-labelledby="card1_heading"
aria-labelledby="card2_heading"
For data-target="#card1_collapse", we need to make sure the # is accepted as a normal string.
e.g…
dmx-bind:data-target="{{"#"}}card{{$index}}_collapse"
Hope this helps.
