▼
Streaming live at 10am (PST)

[resolved] Reusing an interaction for show / hide images

Design help Animations & Interactions
#1

Hi,

I’m sure I’m just doing something stupid so am hoping that someone can enlighten me!

I have followed the tutorial and have an image that starts off hidden and is shown / hidden again by a button. What I need though is multiple buttons all toggling their own images.

If I create a new button and tell it to use the existing Hide / Show interaction and then point it to the image assigned to the new button it changes all buttons to work on that image.

Do I really need to create a separate interaction for each button/image link (my current workaround) or am I (hopefully) missing something obvious?

#2

No you don’t need to.

You need to put the interaction on an element and make it affect another element, either its sibling or child (at the same level or underneath in the hierarchy). Then you check the “limit to sibling/child” box, wich will… do what it says, allowing you to reuse the interaction on many similar elements without them interfering with each other.

http://vincent.polenordstudio.fr/snap/Webflow_-_KDS_2015-03-10_10-27-06.jpg

2 Likes
Show/Hide each div separately
#3

Thank you Vincent that was just what I needed :smile:

Everything is now hiding and showing with a single interaction.

2 Likes
#4

Can someone help me? I have few icons that when I roll over them an image shows below. I can’t find that toggle recorded anywhere. I am using a template. Can someone show me where I can resolve this? Thank you!

#5

Can you please share your project’s public link so it’s easier to understand your issue?

Learn how to do it here: http://help.webflow.com/sharing-your-public-webflow-site-link

#6