jQuery hide/show Effect
jQuery provides a interface for doing various kind of amazing effects like Slide, Fade, Hide, Show, Toggle Effects and Animate.
jQuery hide() and show()
Using the jQuery show() and hide() methods, you can show and hide the HTML elements. Syntax:$(selector).hide(speed,callback);
$(selector).show(speed,callback);
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<h2>Heading 1</h2>
<p>I will disappear if you click on the "Hide" button.</p>
<button id="hide">Click on Hide</button>
<button id="show">Click on Show</button>
</body>
</html>
jQuery toggle()
The jQuery toggle() method is used to make toggle between the hide() and show() method. It hides the shown element and shows the hidden elements. Toggle() method is used to check the selected elements for visibility. If an element is hidden then show() is run and if an element is visible then hide() is run. Syntax:$(selector).toggle(speed, callback);
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<h2>This is the heading</h2>
<p>This is the first paragraph.</p>
<button>Toggle between hide() and show()</button>
</body>
</html>