jQuery hide() Method

Last Updated : 14 Dec, 2023

jQuery hide() method is used to hide the selected element. It acts like the display: none property of CSS and removes the selected element from the document.

Syntax:

$(element_selector).hide(duration, easing, call_function);

Parameter: It accepts three parameters which are specified below-

duration: It specifies the speed of the hide effect.
easing: It specifies the speed of the element at different points of animation.
call_function: This is the call-back function to be executed after the hide operation.

Return Value: It does not return any value.

Example 1: In the below code, the hide() method is used without passing any parameter to it.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function () {
            $(".b1").click(function () {
                $("p").hide();
            });
        });
    </script>
    <style>
        div {
            width: 50%;
            height: 80px;
            padding: 20px;
            margin: 10px;
            border: 2px solid green;
            font-size: 30px;
        }
 
        .b1 {
            margin: 10px;
        }
    </style>
</head>
 
<body>
    <div>
        <p>GeeksforGeeks !.</p>
    </div>
    <!-- click on this button and 
        above paragraph will disappear -->
    <button class="b1">Click me !</button>
 
</body>
 
</html>

Output:

Example 2: In the below example, the hide() method is used with the parameters to hide the selected element.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <!--jQuery code to show the working of this method-->
    <script>
            $(document).ready(function () {
                $(".btn1").click(function () {
                    $("p").hide(1000, function () {
                        alert("Hide() method has finished its working!");
                    });
                });
            });
    </script>
    <style>
        p {
            width: 40%;
            padding: 20px;
            height: 50px;
            border: 2px solid green;
        }
    </style>
</head>
 
<body>
    <p>GeeksforGeeks.!</p>
    <!-- click on this button and 
        above paragraph will hide -->
    <button class="btn1">Click to Hide</button>
</body>
 
</html>