JQuery Tutorial

Define jQuery

How to use jQuery

jQuery Methods

Exercise Methods

jQuery Selectors

jQuery Events

Manipulate CSS Style

jQuery Traversing

jQuery Animations

jQuery AJAX

jQuery Plugins

jQuery Assignment

jQuery Methods

jQuery has built-in methods for hiding and showing HTML elements. Common jquery methods are:

  • hide(), show(), toggle()
  • fadeIn(), fadeOut(), fadeToggle()
  • slideDown(), slideUp(), slideToggle()

jQuery hide() method

Use to hide the HTML elements.
Syntax: $(selector).hide(speed,callback);
speed and callback parameters are optional.

Example 1: Click on any heading to hide it.

The optional speed parameter specifies the speed of method to be execute, and can use the following values: "slow", "fast", or numeric value (milliseconds).
The optional callback parameter specifies the function to be execute after the completing the first function/method.

jQuery show() method

Use to unhide or show the HTML hidden element.
Syntax: $(selector).show(speed,callback);

Example 2: Click hide button to hide all headings, click show button to show all headings.

jQuery toggle() method

jQuery toggle() method use to alternatively hide or show the HTML elements.

Example 3: Click button to hide/show all headings.

Example 4: On Clicking the Heading, the text below heading will be hidden or visible.


The above program hides all the <p> tags as soon as the page loads. Then a click event is attached to the <h1> tags. The click event is applied on the <p> tag, which is immediately below the clicked <h1> tag.

Exercise 5: jquery hide(), fadeout() method.


Exercise 6: jquery animate method.


Exercise 7: jquery toggle() class method.