jQuery | hide() with Examples

Last Updated : 13 Feb, 2019

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 code to show the working of hide() method:
Code #1:
In the below code, no parameter is used to pass to this method.

<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:
Before clicking on “Click me!” button-

After clicking on “Click me!” button-

Code #2:
In the below code, parameter is passed to this method.

<html>
  
<head>
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script>
        <!-- jQuery code to show the working of this method -->
        $(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:
Before clicking on the “Click to Hide” button-

After clicking on the “Click to Hide” button-

My Personal Notes

Related Articles