Div to act as a toggle for a modal inside a looped container

[Paritor]

Hi there,
I have slides with a JSON as its provider. Each slide contains a div designed to act as a button. One part of the div button consists of the modal’s toggle with a plus icon and the URL

#{{dc:looper:field key="letter-of-recommendation"}}

Another part of the “button” is a text element. I want the entire div to toggle my modal, not just the left modal toggle icon.

Clicking on the toggle/modal part (the plus icon) works as expected, i.e. opens the respective modal, but when I click on the div (the “button”) itself which has the same target, the link takes me to the top of the page instead of opening the modal, which means it just reads the hash and ignores the variable.

How do I apply the looped toggle endpoint to the outer div?

https://expats.sbihub.org/team

Thanks1

Kind regards,
Jens

[ruenel]

Hello Jens,

Thanks for writing in! You will need to use the Modal Toggle hash toggle-{{dc:looper:index_number}} as shown below:

And then on the DIV link option, you can have: #toggle-{{dc:looper:index_number}}

Kindly let us know how it goes.

[Paritor]

That’s it Great! Thank you, Rue!

Jens

[tristup]

Hi Jens,

Glad that we are able to help you.

Thanks