I’ve observed the following:
Under the following conditions “Affect different element(s)” does not work.
- There is an existing button (call it button A) with an interaction set to “affect different element” (call the target element X)
- A second button (call it button B) is nested in element X.
- Adding an interaction that is set to “affect different element” (the same element X that B is nested in) doesn’t always consistently work.
I have found that button B can affect opacity of element X but button B cannot affect transforms and display none.
To reproduce this.
Step 1 - Create an interaction on a button that affects another hidden element (div X) and causes it to appear
Step 2 - Create an interaction on a button contained in div X
- Create a button inside div X
- Add an interaction
- Set the trigger to “click”
- Set it to “affect different element(s)” choose div X as the element
- Add a Display None and Transform transition (in order to hide div X).
You will be able to preview the interaction with the preview button
But it won’t work anywhere else.
What should actually happen
It should work on the live site not just when pressing the preview button under the click trigger
Thank you for the detailed explanation.
Can you please share a preview link of the site where you are observing the behavior? That would be extra helpful.
I’m realizing that I changed things since I wasn’t getting anywhere with the nested button, so I now have a single button that toggles.
I have a new problem… clicking anywhere on the site now triggers the interaction when I just want it to work when clicking the button.
The interaction I’m concerned about is captured in this screenshot
It should ONLY be triggered when clicking the “call to action target” area. Instead, clicking almost anywhere on the site triggers the interaction :(.
Looks like you have accidentally applied the interaction to the
@Anna_Kelian… That makes A LOT of sense! … will try to fix it and get back to you.
Yup… fixed. What a relief :).
Thank you very much @Anna_Kelian.
So, of course, I’m curious to find out if that was affecting my attempt to work with a nested button… I’m off to try out my original configuration.
Removing the extra interaction fixed everything. I’m now able to implement the interaction as I intended. Here’s video proof:
Thanks again @Anna_Kelian
You are most welcome
Good luck with your project!
All the best,
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.