Skip to content
Related Articles

Related Articles

Improve Article
How to hide all heading elements on a page when they are clicked in jQuery ?
  • Last Updated : 25 Mar, 2021

In this article, we will see how to hide all heading elements on a page when they are clicked in jQuery. To hide all heading elements from page, we use slideUp() method. First we use click() method to detect the element is clicked and then use 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:

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :