Streaming live at 10am (PST)

Show & Hide Elements on Click

Hi Guys! I watched the “Show & Hide Elements by Click tutorial by Webflow”. So I created this a click animation: Picture -> click -> show other picture -> click -> show original picture.

I did the same as the tutorial shows but I have two problems with the animation: 1. When I click the picture on the first click everything works fine. But on the second click nothing happens. I really don’t know why.
2. When you click the picture a few time in row there is some kind of lag. That shows for a millisecond both images.


Here is my public share link: https://preview.webflow.com/preview/presets-18e506?utm_medium=preview_link&utm_source=dashboard&utm_content=presets-18e506&preview=039af524f88a32a4f429c3709770d0ad&pageId=5f69f64657673113d4f3d7b6&itemId=5f6f52464e2a4c438c076306

For the second click to happen you have to click the same interaction trigger. Your interaction hides interaction trigger so you cannot click it anymore. Set trigger on a parent that holds both images

Thank you very much! That helps me a lot :+1:

I updated it and now it works. Do you also know why it shows both images for a millisecond after the animation starts again (third click)?

Here is the link to the updated version: https://preview.webflow.com/preview/presets-18e506?utm_medium=preview_link&utm_source=dashboard&utm_content=presets-18e506&preview=039af524f88a32a4f429c3709770d0ad&pageId=5f69f64657673113d4f3d7b6&itemId=5f6f52464e2a4c438c076306&mode=preview

Because you have to both show one and hide another element at the same time not one after another. Modify your interaction so that both actions happen simultaneously.

Alright, finally got it :smiley: Thank you very much!

1 Like