How to hide all heading elements on a page when they are clicked in jQuery ?
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:
.png)
.png)