Recreate Show/Hide Interaction

Hopefully, you can help -

I want to recreate a show/hide interaction. Go to: https://businessaccelerator.com ( this is not my design or work, I just like the interaction of showing the application “on request” vs. having it available without asking for it)


Click Apply to Join anywhere within the webpage.

It scrolls you to the bottom of the website.

Next, click Apply to Join in this scrolled section.

When you click the button an application appears, a Show/Hide interaction. I understand how to create the show/hide interaction ( watched the video ). But what I cannot recreate is moving the application up to the top of the screen.

What I have tried

  • I tried making the button “anchor” to the application section. That did not work; it scrolled me to the top of the page.

  • I tried making an interaction that moves the section to the top of the screen. That works, but it created unnecessary space in the section.

**I would like to make the application not only appear ( using the show/hide interaction ) but also scroll to the top of the screen; instead of just appear after the button is clicked. **
Any advice?

Can you post your share link?

I recently created something similar to this on this page:
http://skyrunner3.webflow.io/residential-home

if you go to the dropdown that says “choose your county” and select one, the click interaction opens a hidden section of plans and the anchor link moves to it. (I also had to include an interaction that closes the dropdown menu, so a single button should be easier) I personally found this interaction to be pointless but the client really wanted it so…

Should be able to decipher by checking out one of the interactions in the dropdown links.

https://preview.webflow.com/preview/skyrunner3?utm_source=skyrunner3&preview=5bf3354c9dcf0c75bc7485336815dd8d

Thank you for the adice and example - it worked for me!

1 Like