Hide the show/hide animation by clicking elsewhere on page

[ailsargh]

Hi, is there any way to create a show/hide interaction whereby when the mouse is clicked elsewhere on the page (rather than clicking the element which initiated the interaction again) the hidden element disappears?

I’d like this in my dropdown navbar as well as the ‘accommodation’ and ‘experiences’ sections of the pages ‘The Lakes’ and ‘Amalfi Coast’.

Thanks!!

---

Here is my public share link: https://preview.webflow.com/preview/ailsas-veejay-project-8c963c8bcea96b078?utm_source=ailsas-veejay-project-8c963c8bcea96b078&preview=866f141320ad79531d90c33187c5f705

[Linea]

Is this what you need?

Hide element after clicking anywhere

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 t…

[ailsargh]

Thanks for your suggestion @Linea !

Unfortunately this doesn’t work for me, since the overlay on the body prevents the other elements on the page from being clicked.

Still no solution to this so I had to redesign my page