jQuery Effect - Hide and Show
 |
| jQuery Hide Show Effect jQuery Tutorial CodingTuting |
Syntax:
$(selector).hide(speed, callback);
$(selector).show(speed, callback);
Both Hide() and Show() methods have two optional parameters.
1. The parameter "speed" is used to change the default speed of Hiding and Showing. The value of the "speed" parameter can be: "slow", "fast", or in milliseconds.
2. The parameter "callback" is a function, which executes after the Hide/Show method completed. We'll learn about callback in the upcoming chapter.
1) jQuery Hide()
jQuery Hide() Method is use to hide the HTML element.
Example:
This will hide the element <p>
<button class="eg-button">Text Hide</button> <p> This is an example text. Click on the above button to hide this text. </p>
$(document).ready(function(){
$(".eg-button").click(function(){
$("p").hide();
});
});
Output:
This is an example text. Click on the above button to hide this text.
2) jQuery Show()
jQuery show() Method is use to show the hide HTML element.
Example:
This will show the hide the element <p>
<button class="show-btn">Text Show</button>
<p> This is an example text. Click on the above button to show this text. </p>
$(document).ready(function(){
$("p").hide();
$(".show-btn").click(function(){
$("p").show();
});
});
Output:
This is an example text. Click on the above button to show this text.
Thanks for Reading
EmoticonEmoticon