Streaming live at 10am (PST)

Hide/Show Section via button

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)

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

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,

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

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:

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.

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

Perfection! Thank you for all your help!

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