Reveal Content on Click

Design help Animations & Interactions
1

Hi, I’m trying to do a show/hide interaction example like the one on the webflow website here:

I’m trying to do the reveal content on click and I manage to get the first click part, now I can’t figure out for the life of me to do the second click to hide content again.

Please help. I’ve tried watching the tutorials over and over, but it’s not helping.

Thank you.

Here is my public share link: LINK
(how to access public share link)

2

Hey @miss_topaz,

Your share link isn’t working, double check on that for us please :wink:

Can I suggest you try using the legacy interactions. Click on your desired hide/show button > Go interactions > Swap to legacy and then you can easily control first click and second click.

So you could hide your element, then on first click the desired element is changed to display: Flex etc.
Then on second click the element is display none again.

Let me know if this makes sense!

3

Here is the share link: https://preview.webflow.com/preview/test-animations-4b4a82?preview=3178cd0987b950ca314dc2e7359969a7

I tried to the legacy interactions but I can’t get the grasp of it. I’m new to webflow and I can only do things with step by step instructions.

Thanks.

4

Hey,

First issue is that in your share link, you don’t have a 2nd click animation.

image

You also need to change the positioning of your elements (which you learn with practice).

Firstly change the position of circle 1 to relative, so that we can change the the Z position (The layers, we want it on top)

image
image1215×650 19.6 KB

Secondly lets change the other circle position so that its below

image
image1155×645 18.7 KB

You can get rid of that -200 padding now if you want.

We then need to go back into our interactions and make sure that when we click circle 1, we have a first click and second click animation.

This should guide you through that:
https://streamable.com/5acxf

Let me know how you go.

The interactions / the UI approach can make it a bit tough to grasp straight away. Keep at it thought and you will get the idea. Main issue I think you were having here is either you didnt include the second click, or that you had but weren’t able to trigger it because the other object was ‘blocking’ it.