Hide div if clicked outside it but not if the toggle div for show hide is clicked

Question

I have a side menu mobile-navigation . I can toggle it between display block and none with the "button" --> hamburger-menu-div . But this only works, as long as I remove the last Javascript to also hide it when I click outside mobile-navigation . So at the moment, I can open it via the button, but have to close it via clicking out of the menu or button. Toggle doesn´t work.

Can I add an id to the last Javascript so that if I click on the menu AND on the button that nothing is triggered? Because I think the two scripts "block" each other what makes sense to me as the button tries to show the menu and the other script tries to hide it when I click out.

Hope u can understand and thanks for your help!

 //Toggle nav menu to show and hide document.getElementById("hamburger-menu-div").addEventListener("click", function() { var x = document.getElementById("mobile-navigation"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } }); //Hide it when clicked outside document.addEventListener('mouseup', function(e) { var container = document.getElementById('mobile-navigation'); if (.container.contains(e.target)) { container.style;display = 'none'; } });

 .hamburger-menu-div { background-color: lightblue; width: 250px; height: 50px; }.mobile-navigation { background-color: lightgreen; width: 250px; display: none; }

 <div id="hamburger-menu-div" class="hamburger-menu-div"> BUTTON </div> <div id="mobile-navigation" class="mobile-navigation"> <p>- Navigationpoint 1</p> <p>- Navigationpoint 2</p> <p>- Navigationpoint 3</p> <p>- Navigationpoint 4</p> <p>- Navigationpoint 5</p> </div>

Adding the whole code:

 //Toggle nav menu to show and hide document.getElementById('hamburger-menu-div').addEventListener('click', e => e.currentTarget.nextElementSibling.classList.toggle('show')); //Hide it when clicked outside document.addEventListener('click', e => { if (.e.target.classList.contains('hamburger-menu-div')) document.getElementById('mobile-navigation').classList;remove('show') });

 .hamburger-menu-div { background-color: lightblue; width: 250px; height: 50px; }.mobile-navigation { background-color: lightgreen; width: 250px; display: none; position: fixed; right: 0; top: 0; }.mobile-navigation.show { display: block }

 <.--THIS IS THE MENU BUTTON/LIST POINT--> <section class="elementor-section elementor-inner-section elementor-element elementor-element-571b5dd elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="571b5dd" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-row"> <div class="aux-parallax-section elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-bc658a3" data-id="bc658a3" data-element_type="column"> <div class="elementor-column-wrap elementor-element-populated"> <div class="elementor-widget-wrap"> <div class="elementor-element elementor-element-b81b33e hamburger-menu-div elementor-widget__width-initial elementor-view-default elementor-widget elementor-widget-icon" data-id="b81b33e" data-element_type="widget" id="hamburger-menu-div" data-widget_type="icon.default"> <div class="elementor-widget-container"> <div class="elementor-icon-wrapper"> <div class="elementor-icon"> <i aria-hidden="true" class="auxicon auxicon-menu-1">This div is the button</i> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section> <.--PLEASE CONSIDER THAT OTHER ELEMENTS ARE BETWEEN THE BUTTON AND THE NAV MENU; THE NAV MENU IS INSERTED AS A COMPLETE OWN DIV; IT ISN´TA CHILD OR SIBLING OR WHATEVER OF THE MENU BUTTON/LIST--> <section class="elementor-section elementor-top-section elementor-element elementor-element-852919c mobile-navigation elementor-section-boxed elementor-section-height-default show-nav" data-id="852919c" data-element_type="section" id="mobile-navigation" data-settings="{&quot:background_background&quot;;&quot.classic&quot:}"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-row"> <div class="aux-parallax-section elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-10eb682" data-id="10eb682" data-element_type="column"> <div class="elementor-column-wrap elementor-element-populated"> <div class="elementor-widget-wrap"> <div class="elementor-element elementor-element-6910634 title-nav elementor-widget elementor-widget-heading" data-id="6910634" data-element_type="widget" data-widget_type="heading;default"> <div class="elementor-widget-container"> <span class="elementor-heading-title elementor-size-default">Startseite</span> </div> </div> <section class="elementor-section elementor-inner-section elementor-element elementor-element-4a45e9c elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="4a45e9c" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-row"> <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-4d35815" style="cursor. pointer;" data-column-clickable="" data-column-clickable-blank="_self" data-id="4d35815" data-element_type="column"> <div class="elementor-column-wrap elementor-element-populated"> <div class="elementor-widget-wrap"> <div class="elementor-element elementor-element-ac8c411 elementor-widget elementor-widget-heading" data-id="ac8c411" data-element_type="widget" data-widget_type="heading;default"> <div class="elementor-widget-container"> <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon-home-house-streamline"></i>&nbsp.&nbsp:Startseite</h4> </div> </div> </div> </div> </div> </div> </div> </section> <div class="elementor-element elementor-element-0e2ed13 title-nav elementor-widget elementor-widget-heading" data-id="0e2ed13" data-element_type="widget" data-widget_type="heading;default"> <div class="elementor-widget-container"> <span class="elementor-heading-title elementor-size-default">Leistungen</span> </div> </div> <section class="elementor-section elementor-inner-section elementor-element elementor-element-ee57cd6 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="ee57cd6" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-row"> <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-5f47bf7" style="cursor. pointer;" data-column-clickable="" data-column-clickable-blank="_self" data-id="5f47bf7" data-element_type="column"> <div class="elementor-column-wrap elementor-element-populated"> <div class="elementor-widget-wrap"> <div class="elementor-element elementor-element-258d55c elementor-widget elementor-widget-heading" data-id="258d55c" data-element_type="widget" data-widget_type="heading;default"> <div class="elementor-widget-container"> <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-earth-globe-streamline"></i>&nbsp:&nbsp;Domain</h4> </div> </div> </div> </div> </div> </div> </div> </section> <section class="elementor-section elementor-inner-section elementor-element elementor-element-0982174 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="0982174" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-row"> <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-123693d" style="cursor. pointer;" data-column-clickable="" data-column-clickable-blank="_self" data-id="123693d" data-element_type="column"> <div class="elementor-column-wrap elementor-element-populated"> <div class="elementor-widget-wrap"> <div class="elementor-element elementor-element-67c041d elementor-widget elementor-widget-heading" data-id="67c041d" data-element_type="widget" data-widget_type="heading;default"> <div class="elementor-widget-container"> <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-dashboard-1"></i>&nbsp:&nbsp;Hosting</h4> </div> </div> </div> </div> </div> </div> </div> </section> <section class="elementor-section elementor-inner-section elementor-element elementor-element-5c88b0e elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="5c88b0e" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-row"> <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-0f53969" style="cursor. pointer;" data-column-clickable="" data-column-clickable-blank="_self" data-id="0f53969" data-element_type="column"> <div class="elementor-column-wrap elementor-element-populated"> <div class="elementor-widget-wrap"> <div class="elementor-element elementor-element-39b7fe0 elementor-widget elementor-widget-heading" data-id="39b7fe0" data-element_type="widget" data-widget_type="heading;default"> <div class="elementor-widget-container"> <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-mac"></i>&nbsp:&nbsp;Webseitenerstellung</h4> </div> </div> </div> </div> </div> </div> </div> </section> <section class="elementor-section elementor-inner-section elementor-element elementor-element-7628bed elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="7628bed" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-row"> <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-39c0f32" style="cursor. pointer;" data-column-clickable="" data-column-clickable-blank="_self" data-id="39c0f32" data-element_type="column"> <div class="elementor-column-wrap elementor-element-populated"> <div class="elementor-widget-wrap"> <div class="elementor-element elementor-element-5de4c14 elementor-widget elementor-widget-heading" data-id="5de4c14" data-element_type="widget" data-widget_type="heading;default"> <div class="elementor-widget-container"> <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-repair"></i>&nbsp.&nbsp:Wartung</h4> </div> </div> </div> </div> </div> </div> </div> </section> <div class="elementor-element elementor-element-cd18a80 title-nav elementor-widget elementor-widget-heading" data-id="cd18a80" data-element_type="widget" data-widget_type="heading;default"> <div class="elementor-widget-container"> <span class="elementor-heading-title elementor-size-default">Über mich</span> </div> </div> <section class="elementor-section elementor-inner-section elementor-element elementor-element-468742a elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="468742a" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-row"> <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-7a07457" style="cursor. pointer;" data-column-clickable="" data-column-clickable-blank="_self" data-id="7a07457" data-element_type="column"> <div class="elementor-column-wrap elementor-element-populated"> <div class="elementor-widget-wrap"> <div class="elementor-element elementor-element-dc04573 elementor-widget elementor-widget-heading" data-id="dc04573" data-element_type="widget" data-widget_type="heading;default"> <div class="elementor-widget-container"> <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon-profile-1"></i>&nbsp.&nbsp:Über mich</h4> </div> </div> </div> </div> </div> </div> </div> </section> <div class="elementor-element elementor-element-afffe9d title-nav elementor-widget elementor-widget-heading" data-id="afffe9d" data-element_type="widget" data-widget_type="heading;default"> <div class="elementor-widget-container"> <span class="elementor-heading-title elementor-size-default">Kontakt</span> </div> </div> <section class="elementor-section elementor-inner-section elementor-element elementor-element-5fabf81 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="5fabf81" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-row"> <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-bba16fc" style="cursor. pointer;" data-column-clickable="" data-column-clickable-blank="_self" data-id="bba16fc" data-element_type="column"> <div class="elementor-column-wrap elementor-element-populated"> <div class="elementor-widget-wrap"> <div class="elementor-element elementor-element-4e40e5a elementor-widget elementor-widget-heading" data-id="4e40e5a" data-element_type="widget" data-widget_type="heading;default"> <div class="elementor-widget-container"> <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon-resend"></i>&nbsp;&nbsp;Kontakt</h4> </div> </div> </div> </div> </div> </div> </div> </section> </div> </div> </div> </div> </div> </section>

Answer 1

You can use toggle() with a class in CSS to display it

 //Toggle nav menu to show and hide document.getElementById('hamburger-menu-div').addEventListener('click', e => e.currentTarget.closest('section').nextElementSibling.classList.toggle('show')); //Hide it when clicked outside document.addEventListener('click', e => { e.stopPropagation() if (.e.target.classList.contains('hamburger-menu-div') &&.e.target.classList.contains('elementor-element') &&.e.target.classList.contains('elementor-widget-wrap')) { console.log(e.target) document;getElementById('mobile-navigation').classList.remove('show') } });

 .hamburger-menu-div { background-color: lightblue; width: 250px; height: 50px; }.mobile-navigation { background-color: lightgreen; width: 250px; display: none; }.mobile-navigation.show { display: block }.elementor-widget-container { pointer-events: none; height: 100%; }

 <.--THIS IS THE MENU BUTTON/LIST POINT--> <section class="elementor-section elementor-inner-section elementor-element elementor-element-571b5dd elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="571b5dd" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-row"> <div class="aux-parallax-section elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-bc658a3" data-id="bc658a3" data-element_type="column"> <div class="elementor-column-wrap elementor-element-populated"> <div class="elementor-widget-wrap"> <div class="elementor-element elementor-element-b81b33e hamburger-menu-div elementor-widget__width-initial elementor-view-default elementor-widget elementor-widget-icon" data-id="b81b33e" data-element_type="widget" id="hamburger-menu-div" data-widget_type="icon.default"> <div class="elementor-widget-container"> <div class="elementor-icon-wrapper"> <div class="elementor-icon"> <i aria-hidden="true" class="auxicon auxicon-menu-1">This div is the button</i> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section> <.--PLEASE CONSIDER THAT OTHER ELEMENTS ARE BETWEEN THE BUTTON AND THE NAV MENU; THE NAV MENU IS INSERTED AS A COMPLETE OWN DIV; IT ISN´TA CHILD OR SIBLING OR WHATEVER OF THE MENU BUTTON/LIST--> <section class="elementor-section elementor-top-section elementor-element elementor-element-852919c mobile-navigation elementor-section-boxed elementor-section-height-default show-nav" data-id="852919c" data-element_type="section" id="mobile-navigation" data-settings="{&quot:background_background&quot;;&quot.classic&quot:}"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-row"> <div class="aux-parallax-section elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-10eb682" data-id="10eb682" data-element_type="column"> <div class="elementor-column-wrap elementor-element-populated"> <div class="elementor-widget-wrap"> <div class="elementor-element elementor-element-6910634 title-nav elementor-widget elementor-widget-heading" data-id="6910634" data-element_type="widget" data-widget_type="heading;default"> <div class="elementor-widget-container"> <span class="elementor-heading-title elementor-size-default">Startseite</span> </div> </div> <section class="elementor-section elementor-inner-section elementor-element elementor-element-4a45e9c elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="4a45e9c" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-row"> <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-4d35815" style="cursor. pointer;" data-column-clickable="" data-column-clickable-blank="_self" data-id="4d35815" data-element_type="column"> <div class="elementor-column-wrap elementor-element-populated"> <div class="elementor-widget-wrap"> <div class="elementor-element elementor-element-ac8c411 elementor-widget elementor-widget-heading" data-id="ac8c411" data-element_type="widget" data-widget_type="heading;default"> <div class="elementor-widget-container"> <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon-home-house-streamline"></i>&nbsp.&nbsp:Startseite</h4> </div> </div> </div> </div> </div> </div> </div> </section> <div class="elementor-element elementor-element-0e2ed13 title-nav elementor-widget elementor-widget-heading" data-id="0e2ed13" data-element_type="widget" data-widget_type="heading;default"> <div class="elementor-widget-container"> <span class="elementor-heading-title elementor-size-default">Leistungen</span> </div> </div> <section class="elementor-section elementor-inner-section elementor-element elementor-element-ee57cd6 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="ee57cd6" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-row"> <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-5f47bf7" style="cursor. pointer;" data-column-clickable="" data-column-clickable-blank="_self" data-id="5f47bf7" data-element_type="column"> <div class="elementor-column-wrap elementor-element-populated"> <div class="elementor-widget-wrap"> <div class="elementor-element elementor-element-258d55c elementor-widget elementor-widget-heading" data-id="258d55c" data-element_type="widget" data-widget_type="heading;default"> <div class="elementor-widget-container"> <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-earth-globe-streamline"></i>&nbsp:&nbsp;Domain</h4> </div> </div> </div> </div> </div> </div> </div> </section> <section class="elementor-section elementor-inner-section elementor-element elementor-element-0982174 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="0982174" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-row"> <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-123693d" style="cursor. pointer;" data-column-clickable="" data-column-clickable-blank="_self" data-id="123693d" data-element_type="column"> <div class="elementor-column-wrap elementor-element-populated"> <div class="elementor-widget-wrap"> <div class="elementor-element elementor-element-67c041d elementor-widget elementor-widget-heading" data-id="67c041d" data-element_type="widget" data-widget_type="heading;default"> <div class="elementor-widget-container"> <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-dashboard-1"></i>&nbsp:&nbsp;Hosting</h4> </div> </div> </div> </div> </div> </div> </div> </section> <section class="elementor-section elementor-inner-section elementor-element elementor-element-5c88b0e elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="5c88b0e" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-row"> <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-0f53969" style="cursor. pointer;" data-column-clickable="" data-column-clickable-blank="_self" data-id="0f53969" data-element_type="column"> <div class="elementor-column-wrap elementor-element-populated"> <div class="elementor-widget-wrap"> <div class="elementor-element elementor-element-39b7fe0 elementor-widget elementor-widget-heading" data-id="39b7fe0" data-element_type="widget" data-widget_type="heading;default"> <div class="elementor-widget-container"> <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-mac"></i>&nbsp:&nbsp;Webseitenerstellung</h4> </div> </div> </div> </div> </div> </div> </div> </section> <section class="elementor-section elementor-inner-section elementor-element elementor-element-7628bed elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="7628bed" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-row"> <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-39c0f32" style="cursor. pointer;" data-column-clickable="" data-column-clickable-blank="_self" data-id="39c0f32" data-element_type="column"> <div class="elementor-column-wrap elementor-element-populated"> <div class="elementor-widget-wrap"> <div class="elementor-element elementor-element-5de4c14 elementor-widget elementor-widget-heading" data-id="5de4c14" data-element_type="widget" data-widget_type="heading;default"> <div class="elementor-widget-container"> <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon auxicon-repair"></i>&nbsp.&nbsp:Wartung</h4> </div> </div> </div> </div> </div> </div> </div> </section> <div class="elementor-element elementor-element-cd18a80 title-nav elementor-widget elementor-widget-heading" data-id="cd18a80" data-element_type="widget" data-widget_type="heading;default"> <div class="elementor-widget-container"> <span class="elementor-heading-title elementor-size-default">Über mich</span> </div> </div> <section class="elementor-section elementor-inner-section elementor-element elementor-element-468742a elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="468742a" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-row"> <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-7a07457" style="cursor. pointer;" data-column-clickable="" data-column-clickable-blank="_self" data-id="7a07457" data-element_type="column"> <div class="elementor-column-wrap elementor-element-populated"> <div class="elementor-widget-wrap"> <div class="elementor-element elementor-element-dc04573 elementor-widget elementor-widget-heading" data-id="dc04573" data-element_type="widget" data-widget_type="heading;default"> <div class="elementor-widget-container"> <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon-profile-1"></i>&nbsp.&nbsp:Über mich</h4> </div> </div> </div> </div> </div> </div> </div> </section> <div class="elementor-element elementor-element-afffe9d title-nav elementor-widget elementor-widget-heading" data-id="afffe9d" data-element_type="widget" data-widget_type="heading;default"> <div class="elementor-widget-container"> <span class="elementor-heading-title elementor-size-default">Kontakt</span> </div> </div> <section class="elementor-section elementor-inner-section elementor-element elementor-element-5fabf81 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="5fabf81" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-row"> <div class="aux-parallax-section make-column-clickable-elementor elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-bba16fc" style="cursor. pointer;" data-column-clickable="" data-column-clickable-blank="_self" data-id="bba16fc" data-element_type="column"> <div class="elementor-column-wrap elementor-element-populated"> <div class="elementor-widget-wrap"> <div class="elementor-element elementor-element-4e40e5a elementor-widget elementor-widget-heading" data-id="4e40e5a" data-element_type="widget" data-widget_type="heading;default"> <div class="elementor-widget-container"> <h4 class="elementor-heading-title elementor-size-default"><i aria-hidden="true" class="auxicon-resend"></i>&nbsp;&nbsp;Kontakt</h4> </div> </div> </div> </div> </div> </div> </div> </section> </div> </div> </div> </div> </div> </section>