Collapsible card in repeat region

Wappler General How To
#1

HI all,

Collapsable cards inside a repeat region do not seem to work as i intend. it seems to collapse all the cards, and expand all the cards on click of any toggle button.

Can anyone advise if they have collapsible cards in a repeat region to toggle on click only the selected card.

Cheers,

Johnny Hajjar
@patrick

#2

You should take care of the id’s
Inside the repeat region you will have to add something dmx-bind:id="name_{{$index}}" This way it will open or colapse the specific id. If all cards have the same id they will open or close all together.

Thank you

#3

dmx-bind:id="name_{{$index}} which element do i bind? the button ? do u have an example?

#4

Can you paste your code here? only the collapsible cards part

#5

Hi,

"
<div class="accordion" id="accordion1" is="dmx-repeat" dmx-bind:repeat="api2.data.loanAccounts" key="id">
        <div class="card">
          <div class="card-header" id="accordion1_headingOne">{{productName}}
            <h5 class="mb-0">
              <button class="btn btn-link btn-block active" type="button" aria-expanded="true" aria-controls="collapseOne" dmx-on:click="accordion1.accordion1_collapseOne.toggle()" data-toggle="collapse" data-target="#accordion1_collapseOne">
                Collapsible Group Item #1
              </button>
            </h5>
          </div>
          <div id="accordion1_collapseOne" class="collapse" is="dmx-bs4-collapse" show="true" aria-labelledby="accordion1_headingOne" data-parent="#accordion1">
            <div class="card-body">
              <h4 class="card-title">{{accountNo}}</h4>
            </div>
          </div>
"

please find the code, Thank you in advance!
@t11

#6

Although it needs to be tested something like the below will work

Change this
&lt;div class="card-header" id="accordion1_headingOne"&gt;{{productName}}
To this
&lt;div class="card-header" dmx-bind:id="accordion1_heading{{$index}}"&gt;{{productName}}

This
dmx-on:click="accordion1.accordion1_collapseOne.toggle()"
To this
dmx-on:click="accordion1.accordion1_collapse{{$index}}.toggle()"

This
&lt;div id="accordion1_collapseOne"
To this
&lt;div dmx-bind:id="accordion1_collapse{{$index}}"

Thank you

2 Likes
#7

hi, tried that, but it does not work,

nothing seems to collapse or open now. :frowning:

#8

The idea is that inside the repeat to use dmx-bind:id and not id
With dmx-bind:id you can pass dynamic values to the ids of the collapsible cards so they are unique.

#9

Thank you, i got that to work with your response

1 Like
#10

Having the same problem here, but despite the instructions above, I can’t get it to only show the collapsed region that was clicked

20181119_collapse
20181119_collapse.jpg1129×209 64.6 KB

#11

The button element has a data-target of #collapse1 and there is a div inside it with an id of collapse1
Because it is in a repeat region you can not have the same id and data-target more than once so change to dmx-bind:data-target="#collapse{{$index}}" as well as the div id inside it to dmx-bind:id=“collapse{{$index}}”
This way on the first repeat it will be 0 and count up 1, 2, 3 etc.

2 Likes
#12

Got it now. Hope I will remember this for future reference. Thank you

#13

Great approach, the accordion with an embedded repeat is working well, however I want to add on each repeated row a button that would collapse the corresponding collapse component.
I used

 <button class="btn btn-secondary" type="reset" id="btn_cancel_edit_treatment" dmx-on:click="col_edittreatment{{$index}}.hide()">Cancel</button>

Despite that col_edittreatment{{$index}} is being computed correctly, the function is not working and I am receiving the below error:

“col_edittreatment1.hide()” TypeError: “col_edittreatment1.hide is not a function”

Can you please advise if I am missing anything?

#14

Have you tried using data-toggle and data-target instead of onclick?
Last time I tried, dynamic binding did not work to call such events.

#15

Yes @sid data-toggle and data-target are working well but I wanted to hide the collapse on click (not toggle). I understand that referring to

col_edittreatment{{$index}}

is not possible in an on-click event within a repeater?

#16

It is a bit difficult to access a component action with a dynamic name, since I don’t know the structure I don’t know if it will work, but it should become something like:

this['col_edittreatment' + $index].hide()

Replace the this with the name/id of the parent component of col_edittreatment when it doesn’t work.

1 Like
#17

Thank you @Patrick, unfortunately I tried the below but it did not work:

dmx-on:click=“this[‘col_edittreatment’ + $index].hide()”

But that’s fine, I found another workaround by playing with the ‘Collapse Show’ Dynamic Attribute

#18

Last time I tried it, I could not get it to work. Probably because I had too dynamic controls nested, and I could not figure out the path to be placed instead of this.
Are you sure this works though?

#19

Please share your work. :slight_smile:

#20

This is how I have proceeded, not the most elegant way but it did work:

  1. I have created a variable that tracks the ID of the collapse component that the user has clicked on (using dynamic event ‘click’ on the collapse)
  2. I have set the dynamic attribute of the collapse: ‘Collapse Show’ to this variable
  3. When the user clicks the ‘cancel’ button I set the variable to a random number
1 Like