jQuery Tutorial
jQuery Introduction jQuery Getting Started jQuery Syntax jQuery Selectors jQuery Events
jQuery Effects
jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animation jQuery stop() jQuery Callback jQuery Chaining
jQuery Manipulation
jQuery Get/Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions
jQuery Traversing
jQuery Traversing jQuery Ancestors jQuery Descendants jQuery Siblings jQuery Filtering
jQuery AJAX
jQuery AJAX Intro jQuery Load jQuery Get/Post jQuery AJAX Events
jQuery Misc
jQuery noConflict() jQuery Filters
jQuery References
jQuery Reference jQuery Selectors jQuery Events jQuery Effects jQuery HTML/CSS jQuery Traversing jQuery AJAX jQuery Miscellaneous jQuery Properties

jQuery Effects - Hide and Show

jQuery provides a trivially simple interface for doing various kind of amazing effects.

jQuery effect methods allow us to quickly apply commonly used effects with a minimum configuration.

Example 1 (Click the DIV below):
Click to show/hide the panel

jQuery is a fast, lightweight, and feature-rich JavaScript library that is based on the principle "write less, do more".

jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.


Example 2 (Click the DIV below):
The purpose of jQuery is to make it much easier to use JavaScript on your website.


jQuery hide() and show()

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

The following example demonstrates the usage of hide() method and show() method:

Run code

Here is the syntax for hide() method:

$(selector).hide(duration, easing, callback);

Here is the syntax for show() method:

$(selector).show(duration, easing, callback);

Both hide() and show() methods accept three optional parameters:

  • duration - Determines how long the effect will run. Possible values: "slow", "fast", or milliseconds
  • easing - Indicates which easing function to use for the transition. Possible values: "swing", "linear"
  • callback - Specifies a function to call once the method is completed

The following example demonstrates the duration parameter with hide() and show():

Run code

The following example demonstrates the callback parameter with hide() and show():

Run code

Animates all spans (words in this case) to hide fastly, completing each animation within 200 milliseconds:

Run code

jQuery toggle() Method

We can also toggle between hiding and showing HTML elements using the toggle() method.

If the selected element is initially displayed, it will be hidden; if hidden, it will be shown.

The following example toggles between hide and show all <p> elements when a button is clicked:

Run code

Here is the syntax for toggle() method:

$(selector).toggle(duration, easing, callback);

The toggle() method accepts three optional parameters:

  • duration - Determines how long the effect will run. Possible values: "slow", "fast", or milliseconds
  • easing - Indicates which easing function to use for the transition. Possible values: "swing", "linear"
  • callback - Specifies a function to call once the method is completed

jQuery Effects Reference

For a complete effects reference, visit our jQuery Effects Reference.