Streaming live at 10am (PST)

Hide element after clicking anywhere

#1

Hi everyone,
I’m working on a website for a client, and my question is about adding an interaction in a header element. The header has 4 elements, and one of the elements is supposed to show a dropdown menu on click. On second click of course, the dropdown menu would disappear. But the problem I’m facing is that I need the dropdown to disappear after making the 2nd click anywhere and not just when I 2nd click on the very same element. A perfect example of what I’m looking for is the header on the webflow forums, when you click on “More” a dropdown comes up, and when you click anywhere else on the site, it disappears. Can anyone help me achieve this?

You can check my live site, I want the dropdown to appear when you click on “Get Started” in the header, and disappear when you click anywhere else. This is the exact representation of what I’m trying to do: https://gyazo.com/61b4995a3368f7ab13cdb629f0f28328

Thanks in advance!

Published link: http://loyalty-1896d0.webflow.io/
Read only: https://preview.webflow.com/preview/loyalty-1896d0?utm_source=loyalty-1896d0&preview=b14c02f3c832ef714b1a2a38a98a362c

0 Likes

#2

Hi Aditya

You could try changing your interaction triggers to the whole website’s parent element: the body.

So 1st click on the Get started button will trigger getStartedOpen.

And 1st click on the Body will trigger getStartedClose.

Hope this helps :smiley:

Best regards
David

0 Likes

#3

Alternatively instead of 1st click on Body, you can create an element as a backdrop. Just give it no border, no background color, set it with position: fixed, top: 0, right: 0, bottom: 0 and left: 0. Make it display: block within the getStartedOpen interaction, and set it to display: none within the getStartedClose interaction.

1 Like

#4

Thank you both for your solutions! I tried David’s one first and it worked, gilson’s is also spot on. Thanks again.

0 Likes