jQuery Effects - Hide and Show
You can hide and show any HTML elements or part of text with using jquery.
jQuery hide() and show() Methods
The hide()
method is used to hide (making invisible) an HTML element at runtime.
The show()
method is used to show (making visible) an HTML element at runtime.
Syntax 1:- Basic syntax
$(selector).hide();
$(selector).show();
Syntax 2:- Complete syntax
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
The speed
and callback
parameters are optional.
The optional speed
parameter, which can take the values "slow," "rapid," or milliseconds, determines how quickly the hiding/showing happens.
The optional callback
parameter is a function to perform after completing the hide()
or show()
operation (you will learn more about callback functions in a later chapter).
Example 1 :-
The hide()
and show()
functions in jQuery allow you to hide and reveal HTML elements :
If you click on the "Hide" button, I will disappear.
If you click on the "Hide 2" button, I will disappear slowly.
Output :-
If you click on the "Hide" button, I will disappear.
If you click on the "Hide 2" button, I will disappear slowly.
Note: In the Hide2 and Show2 button, we have used the speed
parameter to make
hide and show slowly. The number "1000" is in milliseconds.
Related Links
jQuery toggle() Method
The toggle()
function may also be used to toggle an element's visibility between hidden and visible.
Syntax :-
$(selector).toggle(speed,callback);
The speed
and callback
parameters are optional.
The optional speed
parameter might be "slow," "rapid," or "milliseconds".
The optional callback
parameter is a function that has to be run upon completion of toggle()
.
Example :-
The elements displayed are concealed and hidden :
This is a h4 heading.
This also a h4 heading.
Output :-
This is a h4 heading.
This also a h4 heading.
Related Links