Skip to content
Related Articles

Related Articles

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

Improve Article
Save Article
  • Difficulty Level : Expert
  • Last Updated : 10 Aug, 2021
Improve Article
Save Article

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.

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
Related Articles

Start Your Coding Journey Now!