How To Hide And Show Div In jQuery
In this article, we will see how to hide and show div in jquery. jQuery show method and jQuery hide method are used to display and hide elements with different effects. For jQuery to show and hide effects, you need to add different parameters like speed, animation, etc.
Here you can use jQuery effects with different types of events like a mouse click, mouse hover, button click, and many more to show methods in jquery and hide methods in jquery.
The .show() method is the simplest way to display an element. The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling .css( "display", "block" ), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.
The jQuery show() method is used to show the selected elements.
Syntax:
$(selector).show();
$(selector).show(speed, callback);
$(selector).show(speed, easing, callback);
Parameters:
speed: This parameter specifies the speed of the delay and its possible values are slow, fast, and milliseconds, It is an optional parameter.
easing: This parameter specifies the easing function to be used for transition.
callback: This parameter specifies the function to be called after completion of the show() effect, It is an optional parameter.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</br>
Nam sed est in ex lobortis commodo vitae in elit. </br>
Praesent eu turpis finibus, elementum tortor ut, bibendum nunc.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
In this example of jQuery show effect, we need to give parameter value in milliseconds, Here we will give 1500 milliseconds speed to show effect.
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(1000);
});
$("#show").click(function(){
$("p").show(1500);
});
});
The jQuery hide() method is used to hide the selected elements. The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css( "display", "none" ), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline and is hidden then shown, it will once again be displayed inline.
Syntax:
$(selector).hide();
$(selector).hide(speed, callback);
$(selector).hide(speed, easing, callback);
Parameters:
speed: This parameter specifies the speed of the delay and its possible values are slow, fast, and milliseconds, It is an optional parameter.
easing: This parameter specifies the easing function to be used for transition.
callback: This parameter specifies the function to be called after completion of hide() effect, It is an optional parameter.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</br>
Nam sed est in ex lobortis commodo vitae in elit. </br>
Praesent eu turpis finibus, elementum tortor ut, bibendum nunc.</p>
<button id="hide">Hide</button>
</body>
</html>
In this example of jQuery hide effect, we need to give parameter value in milliseconds, Here we will give 1500 milliseconds speed to hide effect.
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(2000);
});
$( "button" ).click(function() {
$( "p" ).hide( "slow" );
});
});
You might also like:
- Read Also: How to Add and Delete Rows Dynamically using jQuery
- Read Also: How To Convert HTML To PDF Using JavaScript
- Read Also: Crop Image Before Upload Using Croppie Plugin
- Read Also: How To Generate QR Code Using Javascript
