Hide/Show Section via button

Design help Animations & Interactions
1

Hello,
I’m trying to figure out how to recreate the “Start Hiring” section of this site: http://rivierapartners.com/

I’m looking for a button to show and hide a form field selection on click. I saw through past posts that this could be done through javascript but thought maybe interactions could be used now?

Thanks!

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

2

Hello, @Nicknameddesign

Here are steps for recreating this behavior:

  1. Create structure with button and form under that button

  2. Style form and make it overflow: hidden. Here I would recommend set this option to the Form Wrapper. Also, make sure you are not using top and bottom paddings on that element.

  3. Create interaction for the button:
    -Trigger Click
    -Affect different element = “Form Wrapper Class”
    -1st click >> Height = 0px
    -2nd click >> Height = auto

  4. Give the ID tho the section where all this content created and link the button to this section in the link settings

Hope its help.

Regards,
Anna

3

Hi, @Nicknameddesign if you want to see the structure and interactions here is a link to a website that I created with a few of those examples :wink:

https://preview.webflow.com/preview/inventivaupdate?preview=b7c80877380149dc5cce6d002e90a97d

Hope this helps as well

Cheers,

4

Hi Sabanna,
I thought I followed your instructions but it doesn’t seem to be working. I’m doing it to the Start Hiring area in my site. Here is the public link, thanks!

https://preview.webflow.com/preview/ips-e5cb8d?preview=2cd5d39464f7f8fb59304d3dc7d41311

5

First of all, I apologize that I messed up 1st click and 2nd click actions. You need to switch them so 1st click would open form and 2nd would close.

Also, Oveflow: hidden it is not the same as Display: none :slight_smile:

244×672 24.3 KB

6

Okay…think I’ve got it about 95% of the way there. Only thing now is that I’m able to see the form at first and only on the second click is it going away.

7

Create interaction, connected to the FORM WRAPPER and add there only initial state: height: 0px

8

Perfection! Thank you for all your help!

9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.