Hide/Show animation

Design help General
1

Hello :slight_smile:

Dear incredible Webflow team. Please help me. I have a looming deadline and I am having difficulty with some interactions on the site that I’m building. My first site ever.

There is a social section on the homepage that reveals the assigned section (either Facebook, Instagram or Twitter) based on which button was pressed. There is a first and second click interaction

36%20PM
36%20PM1920×956 257 KB
19%20PM
19%20PM1917×954 343 KB
01%20PM
01%20PM1920×956 342 KB
added to each button that hides the other two remaining sections and shows the current section of the button.

I copied the interaction onto each button, except the Facebook section is set to ‘flex’ on it’s initial state and the Instagram section and Twitter section is set to ‘display none’. Both the Instagram section and Twitter section reveals itself when clicked repeatedly. I don’t understand why the Facebook section won’t show when clicked.

Please help to me fix this :slight_smile: I need the Facebook section to show when landing on the page and show when the Facebook button is clicked.

Here is my site Read-Only: Webflow - Dan Corder

Live Site: http://dan-corder-site.webflow.io/

2

Hi @Phi I reviewed your read only link, and I fixed this. So what you have to do is:

  • For your Facebook button interactions uncheck everything that is “set as initial state”.

  • So in order to hide your instagram and twitter sections when page loads, what you have to do is go to interactions and use “page trigger” instead of “element trigger” for both sections.

And that’s it.

3

Thank you so much! It works :slight_smile:

1 Like