jQuery: Hide all headings on a page when they are clicked

jQuery Events : Exercise-4 with Solution

Hide all headings on a page when they are clicked.
Sample Data :




HTML Code :

<!DOCTYPE html>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>Hide all headings  on a page when they are clicked</title>

JavaScript Code :

$("h1,h2,h3" ).click(function() {
  $( this ).slideUp();

Note: In jQuery slideUp( [duration ] [, complete ] ) method is used to hide the matched elements with a sliding motion.. It has the following parameter :

  • duration : A string or number determining how long the animation will run. [Type: Number or String]
  • complete : A function to call once the animation is complete. [Type: Function()]

Live Demo:

See the Pen jquery-events-exercise-4 by w3resource (@w3resource) on CodePen.

Contribute your code and comments through Disqus.

Previous: Append a <p> element with a text message when an <input> field is changed.
Next: Double click on paragraph to toggle background color.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

Follow us on Facebook and Twitter for latest update.