jQuery Effects – Hide and Show

Posted by tagicon_admin | August 26, 2015 | in : jQuery, Tips & Tricks

Hide and show are most useful effect of jQuery. In this article I will show you how you can easily hide and show elements using jQuery.

jQuery Hide:


To hide the element we have to use .hide() and the following code works for hide a element.


 Click here for Demo

jQuery Show:

To show a element use the following code:


Click here for Demo

In this markup the following jQuery code works for show a hidden element. Actually the jQuery code is as follows:




To show and hide:



Toggle() is most powerful function to hide a element or visible a hidden element.  Use the following code to show and hide effect.


Click here for Demo

To add transition effect during show and hide mention duration on milliseconds such as .hide(1500), .show(1500), .toggle(1500).

Related Posts

Leave a Reply