How to hide all heading elements on a page when they are clicked in jQuery ?

Last Updated : 09 Jun, 2023

In this article, we will see how to hide all heading elements on a page when they are clicked in jQuery.Here we have two common approaches.

Using slideUp() method
Using hide() method

Approach 1: Using slideUp() method To hide all heading elements from the page, we use slideUp() method. First, we use the click() method to detect the element is clicked and then use the slideUp() method to hide the heading elements.

Syntax:

$(selector).click(function() {
    $(this).slideUp();
})

Here, we use the click() method to starts the click event or attach a function to run when a click event occurs and the slideUp() method to hide the selected elements.

Example: Here is the demonstration of the above explanation.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to hide all heading elements on a page
        when they are clicked in jQuery?
    </title>
 
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
 
    <script>
        $(document).ready(function () {
            $("h1, h3").click(function () {
                $(this).slideUp();
            });
        });
    </script>
 
    <style>
        body {
            text-align: center;
        }
 
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
 
    <h3>
        How to hide all heading elements on a page
        <br>when they are clicked in jQuery?
    </h3>
</body>
 
</html>

Output:

Approach 2: Using the hide() method in jQuery: here we use the click() method to detect the element and then we use the hide() method to hide the selected element.

Syntax:

$("button").click(function(){
  $("h1").hide();
});

Example: Here we use the hide() method to hide all heading elements from our page.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".btn1").click(function () {
                $("h1").hide();
            });
            $(".btn2").click(function () {
                $("h2").hide();
            });
            $(".btn3").click(function () {
                $("h3").hide();
            });
        });
    </script>
    <style>
        h1,
        h2,
        h3 {
            color: green;
        }
    </style>
</head>
 
<body>
 
    <h1 class="btn1"> GeeksforGeeks</h1>
    <h2 class="btn2"> GeeksforGeeks</h2>
    <h3 class="btn3"> GeeksforGeeks</h3>
</body>
</html>