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. Here's is an example.
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>
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.
<script>
$(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>
toggle()
MethodThe 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>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>
Similarly, you can also specify a callback function for the toggle()
method.
<script>
$(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>