How to hide/collapse div when click on outside by using pure javascript

Question

I have made simple Javascript function for show and hide but unable to trigger outside click hide function.

HTML

<a href="javascript:void(0);" onClick="showhide()" class="btn" >click </a>

<div id="myID">
    <p>Hello World</p>
</div>

CSS

    .btn{

    color:red;
    border-radius:5px;
    padding:10px;
    display:inline-block;


}

#test{
    display:none;
    border:1px solid blue;
    width:200px;
    height:200px;
    margin:10px
}

Javascript

    function showhide(){
       var div = document.getElementById("test");
            if (div.style.display !== "none") {
                div.style.display = "none";
            }
        else {
            div.style.display = "block";
        }
}

Please check this code here.

No jQuery please. Thanks

Have you googled it ? For example look here for the road to your answer : http://stackoverflow.com/questions/18893144/javascript-detect-click-event-outside-of-div — Artemide Innominato, Jun 04 '15 at 04:35
when you click on outside of "hello world" it should be hide. — Rupesh, Jun 04 '15 at 04:37

score 1 · Accepted Answer · answered Jun 04 '15 at 07:05

You can do this naively by handling global click events, and help yourself by maintaining state.

In the example below, clicks within the element never reach the document, but those outside do via propagation. Clicking the button always toggles the display. Keep in mind, clicking on any element, or propagating to any element, that stops propagation of the click event to the document will cause this to not respond properly.

var toggle = (function () {
  var visible = false,
      ele = document.getElementById('test'),
      btn = document.querySelector('.btn');
  
  function flip () {
    var display = ele.style.display;
    
    ele.style.display = (display === 'block' ? 'none' : 'block');
    visible = !visible;
  }
  
  btn.addEventListener('click', flip);
  
  ele.addEventListener('click', function (e) {
    e.stopPropagation();
  });
  
  document.addEventListener('click', function (e) {
    if (visible && e.target !== btn) flip();
  });
  
  ele.style.display = 'none';
  
  return flip;
}());

body {
  font-family: sans-serif;
}

.btn {
  width: 180px;
}

#test {
  margin: 10px 0;
  padding: 20px;
  display: none;
  box-sizing: border-box;
  width: 180px;
  height: 180px;
  
  background-color: #eee;
  border: 2px solid #333;
  line-height: 96px;
  text-align: center;
  color: #333;
}

<button class="btn">Click!</button>

<div id="test">
  <p>Hello World!</p>
</div>

Documentation:

from your code, I have update my code but whenever define global variable for "test" id its showing "null" value http://jsfiddle.net/rupesx26/eg991yg6/11/ (working) http://jsfiddle.net/rupesx26/eg991yg6/12/ (Null value) — Rupesh, Jun 05 '15 at 08:04

score 0 · Answer 2 · answered Jun 04 '15 at 05:09

you can use two functions such as onclick and onfocusout in javscript

<a href="javascript:void(0);" onClick="showhide()" onfocusout = "focusout()"  class="btn"> click </a>

<div id="test">
    <p>Hello World</p>
</div>

<script>
    function showhide(){
           var div = document.getElementById("test");
            div.style.display = "block";
    }

    function focusout(){
        var div = document.getElementById("test");
        div.style.display = "none";
    }
</script>

How to hide/collapse div when click on outside by using pure javascript

2 Answers2