Open In App

How to hide a div when the user clicks outside of it using jQuery?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how an element can be hidden on click to its surroundings using jQuery. An element can be shown or hidden when clicked outside of it using the methods discussed below:

Using the closest() method

The closest() method can be used to get the elements that are closer to the clicked element where we can pass the element we have to hide as an argument to the closest() method to filter it and check for its length. If it is 0, then hide the element. Otherwise, keep the element in the document.

Syntax:

$('element_selector').closest('filter_param');

Example: The below example explains the use of the closest() method to hide an element on click to its surroundings using jQuery.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to hide a div when the user
        clicks outside of it using jQuery?
    </title>
 
    <style>
        .container {
            height: 200px;
            width: 200px;
            background-color: green;
            border: 5px solid black;
        }
    </style>
 
    <script src=
    </script>
</head>
 
<body>
    <center>
        <h1 style="color: green">
            GeeksForGeeks
        </h1>
 
        <b>
            How to hide a div when
            the user clicks
            outside of it using jQuery?
        </b>
 
        <p>
           Click outside the
           green div to hide it
        </p>
 
        <div class="container" style="color:green"></div>
    </center>
    <script type="text/javascript">
        $(document).mouseup(function (e) {
            if ($(e.target).
                closest(".container").
                length=== 0) {
                $(".container").hide();
            }
        });
    </script>
</body>
 
</html>


Output:

hideOnClick

By checking whether element is clicked or its surroundings

In this method, we will check whether the click is occurred inside the element or outside using the is() and the has() methods of jQuery.

Syntax:

$(selected_element).is()
$(selected_element).has()

Example: The below method checks whether the click occurred outside or inside the element using the is() and has() methods.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to hide a div when
        the user clicks outside
        of it using jQuery?
    </title>
 
    <style>
        .container {
            height: 200px;
            width: 200px;
            background-color: green;
            border: 5px solid black;
        }
    </style>
 
    <script src=
    </script>
</head>
 
<body>
    <center>
        <h1 style="color: green">
            GeeksForGeeks
        </h1>
 
        <b>
            How to hide a div
            when the user clicks
            outside of it using jQuery?
        </b>
 
        <p>
            Click outside the
            green div to hide it
        </p>
 
        <div class="container"
             style="color:green">
        </div>
    </center>
    <script type="text/javascript">
        $(document).mouseup(function (e) {
            var container = $(".container");
            if (!container.
                is(e.target) &&
                container.
                has(e.target).
                length === 0) {
                container.hide();
            }
        });
    </script>
</body>
 
</html>


Output:

hideOnClick

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.



Last Updated : 20 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads