Open In App
Related Articles

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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.

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=
    </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=
    <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>

                    

Output:

 



Last Updated : 09 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads