How to use JavaScript to hide a DIV when the user clicks outside of it?


To hide a div when the user clicks outside of it, try to run the following code

Example

Live Demo

<!DOCTYPE html>
<html>
   <body>
      <script>
         window.onload = function(){
            var hideMe = document.getElementById('hideMe');
            document.onclick = function(e){
               if(e.target.id !== 'hideMe'){
                  hideMe.style.display = 'none';
               }
            };
         };
      </script>
      <div id="hideMe">Click outside this div and hide it.</div>
   </body>
</html>

Rishi Raj
Rishi Raj

I am a coder

Updated on: 18-Sep-2019

936 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements