How to close sidebar when clicking outside

Question

Hope someone advise,

How can I close the sidebar when clicking outside I already know the way of closing it while clicking a certain button

    //MOBILE MENU OPEN
    $(".ed-micon").on('click', function() {
        $(".ed-mm-inn").addClass("ed-mm-act");
    });

    //MOBILE MENU CLOSE
    $(".ed-mi-close").on('click', function() {
        $(".ed-mm-inn").removeClass("ed-mm-act");
    });

I tried to make it as below but the browser considered the open sidebar button enter image description here a part from the body

    $("body").on('click', function() {
        $(".ed-mm-inn").removeClass("ed-mm-act");
    });

I expect someone help. Thanks in advance.

Does this answer your question? [Use jQuery to hide a DIV when the user clicks outside of it](https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it) — Yogi, Jan 22 '23 at 19:45

Vagif VALIYEV · Accepted Answer · 2023-01-22T20:45:09.920

let sidebar = document.querySelector(".sidebar")

document.querySelector('.open').onclick = e => {
  sidebar.style.display = "block"
  e.stopPropagation()
}

document.body.addEventListener("click", e => sidebar.style.display = "none")

.sidebar {
  background: coral;
  position: fixed;
  top: 0;
  left: 0;
  width: 40%;
  height: 100vh;
  animation-name: sider;
  animation-duration: 800ms;
  transform-origin: top left;
}

* {
  text-align: right;
}

@keyframes sider {
  from {
    transform: scaleX(0.0);
    opacity: 0.7;
    border-radius: 0 50% 50% 0;
  }
  to {
    transform: scaleX(1.0);
    opacity: 1.0;
    border-radius: 0;
  }
}

<button class="open">open</button>
<div class="sidebar">sidebar</div>
<br> bla bla
<br> bla bla
<br> bla bla
<br> bla bla
<br> bla bla
<br> bla bla
<br> bla bla
<br> bla bla
<br> bla bla
<br> bla bla
<br> bla bla
<br> bla bla

You can add an event listener to the body of the document. Be careful with how you'll handle it in your sidebar too as clicks here will trigger body's click function too

How to close sidebar when clicking outside

1 Answers1