I have a javascript that opens up a hidden div:

<script>
function dropdown() 
{ document.getElementById("login_dropdown").style.display="block"; }
</script>

The html is:

<div onclick="dropdown()">
<div id="login_dropdown">STUFF</div>
</div>

The CSS is:

<style>
#login_dropdown {
width: 150px;
display:none;
}</style>

Using javascript alone, how can I hide this div when I click anywhere else on the page, excluding the opened DIV itself.

I have a javascript that opens up a hidden div:

<script>
function dropdown() 
{ document.getElementById("login_dropdown").style.display="block"; }
</script>

The html is:

<div onclick="dropdown()">
<div id="login_dropdown">STUFF</div>
</div>

The CSS is:

<style>
#login_dropdown {
width: 150px;
display:none;
}</style>

Using javascript alone, how can I hide this div when I click anywhere else on the page, excluding the opened DIV itself.

• javascript
• html

• You can set up a click handler on the body element to handle all clicks on the page iirc. Then you just need the handler to hide the element. – Carcigenicate Commented Jun 16, 2017 at 18:16
• Could someone show me on jFiddle? – stylusss Commented Jun 16, 2017 at 18:30

4 Answers 4

Something like this with vanilljs

document.addEventListener('click', function(event){
   const yourContainer = document.querySelector('....');
   if(!yourContainer.contains(event.target)) {
      //hide things classes.. yourContainer.classList.add('hidden');
   }
});

function closest(e, t){ 
  return !e? false : e === t ? true : closest(e.parentNode, t);
}

container = document.getElementById("popup");
open = document.getElementById("open");

open.addEventListener("click", function(e) {
  container.style.display = "block";
  open.disabled = true;
  e.stopPropagation();
});

document.body.addEventListener("click", function(e) {
    if (!closest(e.target, container)) {
        container.style.display = "none";
        open.disabled = false;
    }
});

#popup {
  border: 1px solid #ccc;
  padding: 5px;
  display: none;
  width: 200px;
}

<div id="container">
  <button id="open">open</button>
  <div id="popup">PopUp</div>
</div>

You could do this

var elem = document.getElementById("login_dropdown");
(document.body || document.documentElement).addEventListener('click', function (event) {
  // If the element on which the click event occurs is not the dropdown, then hide it
  if (event.target !== elem)
    elem.style.display="none";
}, false);

Something like this:

$("document").mouseup(function(e)
  {
    var subject = $("#login_dropdown");

    if(e.target.id != subject.attr('id'))
    {
        subject.css('display', 'none');
    }
});

works like this. When you click anywhere on the page, the handler fires and pares the ID of the open tab vs the id of the document (which there is none) - so it closes the tab. However, if you click the tab, the handler fires, checks the ID, sees the target is the same and fails the test (thus not closing the tab).