Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to use hide() method on button click using jQuery ?

  • Difficulty Level : Expert
  • Last Updated : 10 Aug, 2021

jQuery has a lot of handy methods to get the work done easily. In this article, we will discuss one of them which is the hide() method. We can use this method for various purposes on our webpage and get an efficient result.

The very first step will be creating an HTML file and link the jQuery library file via CDN.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

jQuery CDN Link: 

<script src=”https://code.jquery.com/jquery-3.6.0.min.js” integrity=”sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=” crossorigin=”anonymous”></script>



 

jQuery hide() method: This method is used for hiding the web elements.

Example 1: Create an HTML file and add the following code to it.

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- jQuery CDN link. -->
    <script
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous">
    </script>
  </head>
  
  <body>
    <button id="btn">Hide</button>
  
    <p><b>GeeksforGeeks</b></p>
  
    <!-- Using hide() method to hide <p/> element. -->
    <script>
      $(document).ready(function () {
        $("#btn").click(function () {
          $("p").hide();
        });
      });
    </script>
  </body>
</html>

Output:

Hide p element

Example 2: We can use the hide() method to hide an image.

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- jQuery CDN link. -->
    <script
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous">
    </script>
  </head>
  
  <body>
    <img
      id="image"
      src=
      alt=""/>
    <button id="btn" 
            style="padding-left: 10px; 
            margin-left: 30px">
       Hide
    </button>
    <!-- Using hide() method to hide an image.-->
    <script>
      $(document).ready(function () {
        $("#btn").click(function () {
          $("#image").hide();
        });
      });
    </script>
  </body>
</html>

Output:

Hide Image

Example 3: The hide() method can also be used to hide any geometrical shape. 

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- jQuery CDN link. -->
    <script
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous">
    </script>
  </head>
      
  <body>
    <div id="shape" 
         style="height:100px; width:100px; 
                background-color:green; 
                border-radius:00%;margin:10px;">
    </div>
      
    <button id="btn" style="margin:10px;">Hide Shape</button>  
  
    <!-- Using hide() method to hide a shape. -->
    <script>
      $(document).ready(function () {
        $("#btn").click(function () {
          $("#shape").hide();
        });
      });
    </script>
  </body>
</html>

Output:

Hide shape




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!