jQuery which is a JavaScript library makes tasks like animation, event handling, or Ajax very easy. These are some tasks that would usually take multiple lines of code to be achieved, but jQuery provides certain methods that can fulfill these tasks in just a single line of code. Although, there are numerous amount of jQuery methods, however, in this guide we will stick to the jQuery hide() method and see how it works.

jQuery hide() Method

As the name suggests, the jQuery hide() method is used for the purpose of hiding specified elements. The elements that you hide using the jQuery hide() method will be completely invisible to the user.

Syntax

The different parameters that you can pass to the hide() method are as follows.

Note: All of the above-mentioned parameters are optional.

Below we have illustrated some examples that will help establish a better understanding of the hide() method.

Example 1

This example demonstrates the hide() method by passing no parameter.

HTML

In the above HTML code two elements are being created

and . Now we will apply the jQuery hide() method on the to hide the

element.

jQuery

<script>

    $(document).ready(function(){

        $(“.button1”).click(function(){

            $(“h1”).hide();

        });

    });

</script>

Output

Before clicking on the “hide” button.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image1-49.png" data-lazy- height="234" src="data:image/svg xml,” width=”811″>

After clicking on the button, the heading will disappear.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image3-48.png" data-lazy- height="156" src="data:image/svg xml,” width=”808″>

Heading disappeared successfully and quickly.

Example 2

This example shows the working of speed parameter.

jQuery

<script>

    $(document).ready(function(){

        $(“.button1”).click(function(){

            $(“h1”).hide(900);

        });

    });

</script>

In the above example, we have passed 900 as a parameter to the hide() function which means once you click the button it will take only 900 milliseconds for the heading to disappear. The lesser the number of miliseconds the faster the heading will disappear and vice versa.

Output

<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image2-3.gif" height="210" src="data:image/svg xml,” width=”801″>

The speed parameter is working properly.

Example 3

This example shows the working of callback parameter.

jQuery

<script>

$(document).ready(function(){

    $(“.button1”).click(function(){

        $(“h1”).hide(900, function(){

            alert(“Hide() method has been successfully executed!”);

        });

    });

});

</script>

In the above code snippet, along with the speed parameter we have also passed the callback parameter. Once the hide() method has been executed an alert message will also appear confirming the successful execution of the method.

Output

Before you click on the button.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image5-34.png" data-lazy- height="230" src="data:image/svg xml,” width=”808″>

After you click on the button.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image4-49.png" data-lazy- height="271" src="data:image/svg xml,” width=”784″>

The callback parameter is working properly.

Conclusion

The jQuery hide() method is used for the purpose of hiding specified elements. Once the elements are hidden they will completely disappear from the sight of the user. You can pass three parameters to the hide() function which are; speed, easing, and callback. All of these parameters are optional. The jQuery hide() method is explained in-depth in this guide along with examples that illustrate the usage of the different hide() method parameters.