In this tutorial you will learn how to show hide HTML elements using jQuery Hide & Show.
jQuery show() and hide() Methods
You can show and hide HTML elements using the jQuery show() and hide() methods.
The hide() method simply sets the inline style display: none for the selected elements. Conversely, the show() method restores the display properties of the matched set of elements to whatever they initially were—typically block, inline, or inline-block—before the inline style display: none was applied to them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of jQuery Show Hide Effects</title>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<style type="text/css">
p{
padding: 15px;
background: #F0E68C;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<button type="button" class="hide-btn">Hide Paragraphs</button>
<button type="button" class="show-btn">Show Paragraphs</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
You can optionally specify the duration (also referred as speed) parameter for making the jQuery show hide effect animated over a specified period of time.
Durations can be specified either using one of the predefined string 'slow' or 'fast', or in a number of milliseconds, for greater precision; higher values indicate slower animations.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of jQuery Animated Show Hide Effects</title>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<style type="text/css">
p{
padding: 15px;
background: #F0E68C;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
// Hide displayed paragraphs with different speeds
$(".hide-btn").click(function(){
$("p.normal").hide();
$("p.fast").hide("fast");
$("p.slow").hide("slow");
$("p.very-fast").hide(50);
$("p.very-slow").hide(2000);
});
// Show hidden paragraphs with different speeds
$(".show-btn").click(function(){
$("p.normal").show();
$("p.fast").show("fast");
$("p.slow").show("slow");
$("p.very-fast").show(50);
$("p.very-slow").show(2000);
});
});
</script>
</head>
<body>
<button type="button" class="hide-btn">Hide Paragraphs</button>
<button type="button" class="show-btn">Show Paragraphs</button>
<p class="very-fast">This paragraph will show/hide with very fast speed.</p>
<p class="normal">This paragraph will show/hide with default speed.</p>
<p class="fast">This paragraph will show/hide with fast speed.</p>
<p class="slow">This paragraph will show/hide with slow speed.</p>
<p class="very-slow">This paragraph will show/hide with very slow speed.</p>
</body>
</html>
Note:The speed or duration stringÂ
'fast'Â indicates the durations of 200 milliseconds, while the stringÂ'slow'Â indicates the durations of 600 milliseconds.
You can also specify a callback function to be executed after the show() or hide() method completes. We’ll learn more about the callback function in upcoming chapters.
<script type="text/javascript">
$(document).ready(function(){
// Display alert message after hiding paragraphs
$(".hide-btn").click(function(){
$("p").hide("slow", function(){
// Code to be executed
alert("The hide effect is completed.");
});
});
// Display alert message after showing paragraphs
$(".show-btn").click(function(){
$("p").show("slow", function(){
// Code to be executed
alert("The show effect is completed.");
});
});
});
</script>
jQuery toggle() Method
The jQuery toggle() method show or hide the elements in such a way that if the element is initially displayed, it will be hidden; if hidden, it will be displayed (i.e. toggles the visibility).
<script type="text/javascript">
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>
Similarly, for jQuery Show & Hide Effect you can specify the duration parameter for the toggle() method to make it animated like the show() and hide() methods.
<script type="text/javascript">
$(document).ready(function(){
// Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").toggle();
$("p.fast").toggle("fast");
$("p.slow").toggle("slow");
$("p.very-fast").toggle(50);
$("p.very-slow").toggle(2000);
});
});
</script>
Similarly, you can also specify a callback function for the toggle() method.
<script type="text/javascript">
$(document).ready(function(){
// Display alert message after toggling paragraphs
$(".toggle-btn").click(function(){
$("p").toggle(1000, function(){
// Code to be executed
alert("The toggle effect is completed.");
});
});
});
</script>