Sibling and Nested elements problem

Design help Animations & Interactions
1

Good afternoon for everybody.

I have create a block where you could change the size of the goods, and I need when you change it that the price will changed and the element size will be active others aren’t (I implement it with block background color).
For the first look it works. But I need the same block below have to work separately. Now, when you choose the size you see the changing of the price in all blocks including below and in the top. The same problem is with the background opacity of inactive blocks of size.

I’ve read a lot of topics in this forum, I’ve tried as choosing “Limit to nested elements” as “Limit to sibling elements”, but nothing helps.

Could anybody help with advice? TIA.

966×795 323 KB

Page SteelRage
574×512 35.3 KB

Here is my public share link: https://preview.webflow.com/preview/beinvogue?preview=eca026bf568cd3344097eb91c402ce97
(how to access public share link)

2

Siblind and nested wont work for your case, because within your html structure the “triggered” element and the “targeted” element are not in one hierarchie nor nested…

I made a screenshot to show that … the red dot is the element that has the interaction on it… 1 would be a sibling and 2 would be a nested element.

But you target the element 3 which is cost. No chance to have that triggered with just one interaction. You d have to duplicate also your interaction for every module that you duplicate…

1 Like
3

Thanks!
I’ve thought about this variant. But in this case will be more code, because I need to create one more interaction and one more class name.

4

Yeah exactly. The other solution would be to restructure your elements in a way to be able to target easily siblings or nested … but i have no real solution for that yet…

1 Like
5

Ok, thank you. I’m going to create new interactions.:scream:

6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.