Hide element completely on click?

Hi, Is it possible to make an element disappear completely on click? I want to have the middle jellyfish disappear on click but if i set an interaction to hide it on click if its clicked again the animation just happens again.

I want to hide the jellyfish image on tap so on mobile browser that can’t autoplay videos the play button is clickable.


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

Hey!

Your sites looking cool!

Pretty simple fix here, in the interactions you have a second click animation. Just click the drop down on the second click and change this to default.

Hope that helps!

Hi, I tried changing it to default on the second click bu when i click it a second time it just makes the first animation run again =\ I want first click to hide and second to act like if its not there so I can click an element behind it.

Oh right,

Let’s try this.

Firstly lets set the display of the jellyfish to none.

Then in the interactions we’re going to set an initial display to show (flex) along with your 60% opacity.

So now the image is hidden but the interaction has an initial display that shows it.

Once the user hits the jellyfish it will trigger the interaction which is sends its opacity to 0% and then hides.

Hope that fixes it

Tom

:webflow_heart: @flowbase.co

Thank you! This seemed to work perfectly :slight_smile:

1 Like