show() and hide() MethodsYou can use the jQuery show() and hide() methods to display and conceal HTML elements.
The hide() method sets the inline style display: none for the selected elements. On the other hand, the show() method reverts the display properties of the chosen elements back to their original state—typically block, inline, or inline-block—before the display: none inline style was applied. Here’s 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 have the option to specify a duration (also known as speed) parameter to animate the jQuery show and hide effects over a specified period of time.
Durations can be specified using one of the predefined strings like 'slow' or 'fast', or in milliseconds for more precise control; 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>
Note: The speed or duration string 'fast' corresponds to 200 milliseconds, whereas 'slow' corresponds to 600 milliseconds.
You can also define a callback function to run after the completion of the show() or hide() method. We'll delve deeper into callback functions in the upcoming chapters.
<script>
$(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>toggle() MethodThe jQuery toggle() method toggles the visibility of elements. If an element is initially displayed, it will be hidden; if it's hidden, it will be displayed.
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>Similarly, you have the option to specify a duration parameter for the toggle() method to animate its effect, just like the show() and hide() methods.
<script>
$(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 define 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>