jQuery Hide and Show Effects

In this tutorial you will learn how to show hide HTML elements using jQuery Hide & Show.

jQuery show() and hide() Methods

You can show and hide HTML elements using the jQuery show() and hide() methods.

The hide() method simply sets the inline style display: none for the selected elements. Conversely, the show() method restores the display properties of the matched set of elements to whatever they initially were—typically block, inline, or inline-block—before the inline style display: none was applied to them.

You can optionally specify the duration (also referred as speed) parameter for making the jQuery show hide effect animated over a specified period of time.

Durations can be specified either using one of the predefined string 'slow' or 'fast', or in a number of milliseconds, for greater precision; higher values indicate slower animations.

Note:The speed or duration string 'fast' indicates the durations of 200 milliseconds, while the string 'slow' indicates the durations of 600 milliseconds.

You can also specify a callback function to be executed after the show() or hide() method completes. We’ll learn more about the callback function in upcoming chapters.

jQuery toggle() Method

The jQuery toggle() method show or hide the elements in such a way that if the element is initially displayed, it will be hidden; if hidden, it will be displayed (i.e. toggles the visibility).

Similarly, for jQuery Show & Hide Effect you can specify the duration parameter for the toggle() method to make it animated like the show() and hide() methods.

Similarly, you can also specify a callback function for the toggle() method.

This is the end of the tutorial to use jQuery Hide & Show Effects. If you have any question relating jQuery Hide & Show topic, ask at ou Forum Section.