jQuery Effects - Hide

jQuery Effects - Hide: Learn about the jQuery hide() method, how it works, and its example.
Submitted by Pratishtha Saxena, on September 22, 2022

jQuery hide() Method

Hiding content from a webpage is an important aspect of developing the page. Sometimes a particular content has to be shown to the user sometimes not. Hence, it has to be controlled dynamically. Therefore, the jQuery hide() method plays its part here.

This is the basic jQuery effect method that helps to hide the display of the specified content on the webpage. The HTML elements can be mentioned as a selector and this method will help to hide that element from the page.

hide() Method Syntax

$(selector).hide();  
$(selector).hide(speed, callback);

It can either be defined just by itself, i.e., without any parameters or it can also take speed & callback as its parameters. When speed is defined, then the element gets hidden according to it. It can be fast, slow, normal, or even in milliseconds. The callback is a function over here that gets executed when the hide method completes its task.

Below given is a simply executed example using the hide() method. There, you will be able to see the difference between when the speed factor is used and when it is not. In the one where the speed parameter has not been specified, the element gets hidden within a fraction of seconds as soon as the button is clicked. Whereas, when it is defined, it gets hidden in a motion taking the specified amount of time.

jQuery hide() Method Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery Effects - Hide</h2>
    <p>Click the button to hide the following content from the page.</p>
    <button>Hide</button>
    <hr>
    <h3>PLEASE HIDE ME !!!</h3>
    <h4>OLD CONTENT.</h4>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function() {
        $('button').click(function() {
            $('h3').hide(1000);
            $('h4').hide();
        })
    });
  </script>
</html>

Output:

jQuery - Effects

jQuery - Effects: Show

Comments and Discussions!

Load comments ↻