With jQuery, you can use jQuery show/hide effect an HTML elements using the functions show() and hide(). The hide() function be used to hide some HTML element when some event occurs while show() can be used to display the hidden element.
Syntax
$(selector).show(speed,callback);
The syntax contains the selector to access the HTML element and a show function that contains two optional parameters. The first parameter can be used to provide the speed of the effect in milliseconds.
The show() reverse the effect of hide() and display the element hidden by hide(). The hide() applies the display:none CSS to the HTML element when use the jquery function while show() applies the display:block CSS.
HTML
<div class="para">The content to display jQuery show/hide function effect.</pdiv>
<button id="hide">Hide</button>
<button id="show">Show</button>
Script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$(".para").hide();
});
$("#show").click(function(){
$(".para").show();
});
});
</script>
Output
How useful was this post?
Click on a star to rate it!
Average rating 0 / 5. Vote count: 0
No votes so far! Be the first to rate this post.
We are sorry that this post was not useful for you!
Let us improve this post!
Tell us how we can improve this post?
Share