click to show div, click again to hide, or click outside the div to hide

Question

i have managed to make a script that allows me to show and hide my div when i click a link, but i also want it to hide the div when i click outside the div.... how do i manage such thing?

<script>
function toggle() {

var ele = document.getElementById("dropdown");

var text = document.getElementById("trigger");

if(ele.style.display == "block") {

        ele.style.display = "none";

    text.innerHTML = "Kontakta oss";

}

 else {

    ele.style.display = "block";

    text.innerHTML = "Kontakta oss";

}

 } 
    </script>

Possible duplicate of [How to detect a click outside an element?](http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element) — lex82, Dec 08 '15 at 21:14
Possible duplicate of [How to close-hide DIV clicking outside of it (but not inside)](http://stackoverflow.com/questions/6140278/how-to-close-hide-div-clicking-outside-of-it-but-not-inside) — markasoftware, Dec 08 '15 at 21:15

pethel · Accepted Answer · 2015-12-08T22:01:14.483

0

You need to listen to clicks on the document.

var ele = document.getElementById("dropdown");

document.addEventListener("click", function(event){ 
  var childClicked = [].slice.call(ele.getElementsByTagName('*')).some(function(node) {
    return node === event.target;
  });
  if(event.target !== ele && !childClicked){
      ele.style.display = "none";
  } 
});

I am using document here but you can choose whatever fits your needs with document.querySelector for example.

edit:after comment

edited Dec 08 '15 at 22:01

answered Dec 08 '15 at 21:24

pethel

5,397
12
55
86

This is partially correct but this code will still close when you click on the div as well. Not just outside it. – AtheistP3ace Dec 08 '15 at 21:28
Yes thats true. He will have to check what element was clicked. – pethel Dec 08 '15 at 21:29

click to show div, click again to hide, or click outside the div to hide

1 Answers1