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.

Output

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.

Output

Exercise 6: jquery animate method.

Output

Exercise 7: jquery toggle() class method.

Output