▼
Streaming live at 10am (PST)

Hide element after clicking anywhere

Design help Animations & Interactions
#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

Hide the show/hide animation by clicking elsewhere on page
#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

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

#5

Thank you! It took me more than 6 hours to make it work as I want with a backdrop Div, but I did it)

In order to get the cursor always look good (as a little hand) on hover on trigger area, I created two identical Link Blocks for the trigger area: the default Click-to-open-the-menu block (shown by default) and another Click-to-close-the-menu block (shown only when the menu is open). With the second one put on the right place (with an absolute positioning and a negative margin) they look/feel absolutely as a single control for a user.

#6

Hi,
This is exactly the issue I am having! And I can solve it partly with @Davidlin_ch12 answer. @gilson answer doesn’t help me, since I have a lot of other buttons on the page that would then need to be double clicked in order to work.

When I do this, it first looks like it works. But then, when I click the trigger button (in your case the ‘Get Started’ button, it doesn’t work at first, because it closes it On 2nd click.
This means that if someone clicks the ‘Get started’ button the menu pops up. If they then click anywhere else (the body) the menu disappears again, but then they need to click ‘Get Started’ twice in order to open the menu again.

Did anyone else have this problem, and do you have a solution for it?

Thank a lot :slight_smile:

#7

Hey Linea, are you able to share your read-only link, so we can help you better?

The solution I made probably does not work anymore because of event bubbling. It also requires both an open and a close trigger button. The only methods I can come up with right now would be Gilson’s solution with some clever z-index stacking to make sure all buttons stay on top of the backdrop, or using custom code event handlers.

#8

Hi @Davidlin_ch12 , thanks a lot for your answer!
Since it’s for a client I am unable to share it. But I did actually solve it with custom code :slight_smile: I prefer to avoid custom code though.

#9

Hi, I’m struggling with the same exact issue. Would you be so kind and share the custom code?

#10

Hi :slight_smile: It’s a project for a client, so I can’t share a link with you.
This is what it looks like:

Head code:

.globe-wrapper, .arrow-wrapper, .language-text, .arrow  {
	pointer-events: none;
}

and for footer code:

const triggerFooter = document.querySelector('.language-footer');
const triggerNav = document.querySelector('.chose-language');
const whiteDivNav = document.querySelector('.lauguage-dropdown-balloon');
		const whiteDivFooter = document.querySelector('.lauguage-dropdown-balloon-footer');

    document.addEventListener('click', event => {
      let currentPlace = event.target.classList[0];
      if (currentPlace === 'chose-language') {
      	whiteDivNav.classList.toggle('block');
        whiteDivFooter.classList.remove('block');
      } else if (currentPlace === 'language-footer') {
      	whiteDivFooter.classList.toggle('block');
        whiteDivNav.classList.remove('block');
      } else if (currentPlace === 'lauguage-dropdown-balloon-footer' || currentPlace === 'lauguage-dropdown-balloon') {
      	return 1;
      } else {
      	whiteDivFooter.classList.remove('block');
        whiteDivNav.classList.remove('block');
      };
      
    });
</script>
1 Like