jQuery hide and show methods are used to give special effects to the elements on hiding, showing, changing style properties. These methods can be useful in building an interactive user interface.
jQuery Hide and Show Effects:
jQuery Hide Method:
jQuery hide() method is used to hide the selected HTML element.
Syntax:
In the above syntax:
Speed is an optional parameter that specifies the speed of the delay and its possible values are slow, fast and milliseconds.
The callback is also an optional parameter that specifies the function to be called after completion of hide() effect.
In the following example, we are hiding the selected <h2> element.
jQuery Show Method:
The jQuery show() method is used to show the selected HTML elements.
Syntax:
In the above syntax:
Speed is an optional parameter that specifies the speed of the delay and its possible values are slow, fast and milliseconds.
The callback is also an optional parameter that specifies the function to be called after completion of show() effect.
In the following example, we are showing and hiding the selected <h2> element.
jQuery toggle():
The jQuery toggle() method is used to toggle between the hide() and show() method.
The toggle() method hides the shown element and shows the hidden elements.
Syntax:
In the above syntax:
Speed is an optional parameter that specifies the speed of the delay and its possible values are slow, fast and milliseconds.
The callback is also an optional parameter that specifies the function to be called after completion of toggle() effect.
Example:
When the user clicks on the hide button <h2> element it will get hide and when the user clicks on the show button <h2> element will get displayed.