Streaming live at 10am (PST)

Hide/Show Section via button


#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:


#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.