Hi, John! Thanks for the question.
If you are using state and actions for multiple “show and hide” buttons that affect different elements on your page, the state will need to have its own unique key for each element.
Here is an example:
Let’s say we want to be able to hide and show these two photos independently.
We need to give each button an on click action (Navigate to the Element actions section located in the Data tab). For the first set of buttons, we can give the “hide” button
state.imageOneHidden = true and the “show” button
state.imageOneHidden = false.
For the second set of buttons, we can repeat the step we did for the first set, but we need to give the state a different unique key. Lets give the “hide” button
state.imageTwoHidden = true and the “show” button
state.imageTwoHidden = false.
- Now, we can see hidden being toggled on and off separately for each set of buttons.
- Now, you can bind the hidden property to your content. For the top image, we will get
state.imageOneHidden. For image two, we will get
Here is the end result:
I hope this was helpful! If you have any questions let us know!