Streaming live at 10am (PST)

Toggle Switch Interaction - how to reuse it for many elements

Hello to all the Community! :grinning:

I’ve got a switcher/toggle that changes the amount of U$S in a Price Table from monthly to annualy plan when you click on

I’m needing some help/tips to reuse that one interaction so it could work independent in more than one plan, as I have 2 of them (Basic + Premium).

I’m adding a screenshot to clarify this:

Is there a way to reusing things in other interaction at the same page? I need to make both interactions independent so that when I click on the basic plan I only modify the parameter in that specific box and when I click on the premium plan the same thing happens.

In this moment, when you click on one of them, it changes the price in Basic and Premium.


Here is my public share link: [LINK][1]
([how to access public share link][2])

[1]: https://preview.webflow.com/preview/connectto?utm_medium=preview_link&utm_source=designer&utm_content=connectto&preview=01eb5261536a7334b014420246a7cfff&pageId=5ec005510cd8676559da8864&mode=preview
[2]: https://university.webflow.com/article/sharing-your-sites-read-only-link

Hey @diegokurz, usually you would use the class selector to do this. However, looking at your DOM structure it doesn’t seem to fit any of the criteria.

As you see now your animation is set to affect All elements with this class. “This” being the element you want to animate when toggle is active.
Screen Shot 2020-05-24 at 17.18.37
These are the selector options available.
Screen Shot 2020-05-24 at 17.18.39
And as you can see here your Toggle element has neither Children, Sibling, or Parent relation to the affected elements.
Screen Shot 2020-05-24 at 17.18.42
First step you can take is to move the Toggle Contain to the same level as Pricing Box Row. Then you can use the Only siblings with this class option.
Screen Shot 2020-05-24 at 17.25.31