How to hide block of HTML code on a button click using jQuery ?

Last Updated : 10 Aug, 2021

In this article, we will learn how to hide a block of HTML code with a button click. We can do this by using the jQuery inbuilt hide() method. Let’s briefly learn the functionality of this method.

hide(): In CSS, we have a property display:none which basically hides the element. This hide() method in jQuery also hides the selected element.

Syntax:

$(selector).hide()

Example 1: In the following example, text will be hidden after 2 seconds. The selected element will be hidden immediately. This is the same as calling .css(“display”, “none”). Before hiding, the hide() method saves the value of the “display” property in jQuery’s data cache so that the “display” can be later restored to its initial value.

HTML

<!DOCTYPE html> 
  
<head> 
    <!-- jQuery library -->
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"> 
    </script> 
</head> 
  
<body> 
    <p>Below text will remove in 2 sec</p> 
  
    <p id="test"> 
        Hello Geeks 
    </p> 
  
    <script> 
        setTimeout(function(){ 
            $("#test").hide() 
        },2000) 
    </script> 
</body> 
  
</html>

Output:

hide method

Example 2: In the following example, we will learn how we can hide a block of HTML code on a button click using jQuery.

HTML

<!DOCTYPE html> 
  
<head> 
    <!-- jQuery library -->
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"> 
    </script> 
</head> 
  
<body> 
    <p>Click on the button to hide below text.</p> 
  
    <p id="test"> 
        Hello Geeks 
    </p> 
  
    <button>Click Me</button> 
    <script> 
        $('button').click(function(){ 
            $("#test").hide() 
        }) 
    </script> 
</body> 
</html>