Dynamic ID for Repeat Region?

I have a repeat region using the accordion cards component. I would like to be able to click on each card individually and toggle a dynamic collapse for the one card. Instead all of the cards toggle. This is because they all have the same ID, so accordion1_collapseOne.toggle() opens all of them. How can I have a dynamic ID instead so I can open each card individually?

Thanks!

Add the $index to the ID , like card[{{$index}}]

image

1 Like

Great thank you. But how would I then get the button to trigger this? An option does not appear:

I would assume I would need to somehow select $index?

Click Dynamic Attributes and choose Name. Then for the Value you choose the $index under the Repeat. Once you have done that, go into code view and change dmx-bind:name= to dmx-bind:id=

Sorry, I cannot think of a better way.

Alright I’ve tried a few things with no luck. Any thoughts on my code?

What I’m thinking is that I need an “on click” for the button? I’ve tried a few things but nothing has worked so far.

I think your button should look like this:
<button class="btn btn-primary" dmx-on:click="toggler.setValue((toggler.value == -1 || toggler.value != $index) ? $index : -1)" dmx-show="omschrijving!='<p><br></p>'">{{Username}}</button>
But modified for collapse of course

I (finally) figured out a way to do this in wappler without adding code:

  1. Create a variable that is populated by button click with $index

  2. add a class toggle to the card body:

Thank you all for your help!

1 Like

I’m running into a similar situation except with a checkbox repeating group that’s populated from the DB by a server connection:
image

image

The issue is that the ID for the repeated group is duplicated. In this case, only Test1 should be checked off. When I edit the HTML in the Chrome Inspector and make the ID unique it works correctly.

The question is, how to do the same thing in Wappler. I am guessing I need to enter the dynamic ID on the Custom Checkbox repeating group element, but not sure how to do that or whether that’s even close to correct.

Hi @nepatriot,

The solution should be the same concept. You first need some unique ID (either $index or primary key on your db). I don’t know exactly which dynamic attribute can trigger a check box but this should be possible.

Hi @nepatriot, you can try @ben’s solution.
e.g. you can set the ID’s as:
dmx-bind:id="input_{{$index}}"