Skip to content
Related Articles

Related Articles

jQuery hide() Method

Improve Article
Save Article
  • Last Updated : 21 Nov, 2022
Improve Article
Save Article

The hide() is an inbuilt method in jQuery used to hide the selected element. 

Syntax:

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

Here selector is the selected element. 

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 point of animation.
  • call_function: This is call back function to be executed after hide operation.

Return Value: It does not return any value.

jQuery examples to show the working of hide() method:

Example 1: In the below code, no parameter is used to pass to this method. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </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 code, parameter is passed to this method. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </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>


Output: 

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!