Jquery hide show and toggle example

In this post, we will see jquery hide ,show and toggle example.

jQuery hide()

It is used to hide matched element. With jQuery, you can hide elements with hide method
Example :

Syntax :

The optional speed parameter is used to specify the speed of the hiding, and can take the following values: “slow”, “fast”, or milliseconds.
The optional callback parameter is a function that will be executed after the hide() method completes. The following example demonstrates the speed parameter with hide():

Create html file as jQueryHide.html

Live demo:JQuery Hide Content on jsbin.com

jQuery show()

It is used to show matched element. With jQuery, you can show elements with show method Example :

Syntax :

The optional speed parameter is used to specify the speed of the showing, and can take the following values: “slow”, “fast”, or milliseconds.
The optional callback parameter is a function that will be executed after the show() method completes.
The following example demonstrates the speed parameter with show():

Create html file as jQueryShow.html

Live demo:JQuery Show Content on jsbin.com

jQuery toggle()

With jQuery, you can toggle between the hide() and show() methods with the toggle() method. Shown elements are hidden and hidden elements are shown:
Example :


Syntax:

The optional speed parameter can take the following values: “slow”, “fast”, or milliseconds.
The optional callback parameter is a function to be executed after toggle() completes. Example:

Live Demo:
JQuery Toggle to Show/Hide Content on jsbin.com

Add Comment