Example Description
In this example we demonstrate how to get the context of a user interaction with a specific item in a repeater and how to use that context to perform additional actions on the item. When site visitors click the switch of a specific repeater item, we show or hide elements within the same item.
How We Built It
Page Elements
We added a repeater to our page and attached the following elements to our repeater:
Image: is hidden when a site visitor changes the switch to Hide and is shown when switching the switch to Show.
Text element: description text which is hidden when a site visitor changes the switch to Hide and is shown when switching the switch to Show.
Switch: for hiding and showing the repeater item elements.
Code
If a site visitor clicks a switch in one of the repeater items, do the following:
Define animation options for hiding and showing the image and text elements.
Using the context of the click event, build a selector function for the repeater item in which the switch was clicked.
Using the selector function, check whether the selected switch is checked. If it is, show the image and text element in the same repeater item.
If the switch isn’t checked, hide the image and text element in the same repeater item.
Related Examples
Did this help?
|
Thanks for your feedback!
Mega Search
Filter a repeater using multiple input components.
Advanced
Multiple Filter Methods
Apply multiple filters to store products, with or without a dataset
Intermediate
Zoom-In Effect
Add a hover animation to repeater items
Beginner