- 5 years ago
- Zaid Bin Khalid
- 9,557 Views
-
3
In this session, you will learn how to show hide HTML elements using jQuery with the help of an example.
jQuery Show ( ) and Hide ( ) Methods
By using show( ) and hide( ) methods you can show and hide HTML elements in jQuery.
By using the hide ( ) method you can simply set the inline style display: none for the selected elements. With the help of the show ( ) method you can restore the display properties of the same matched set of elements. As shown in example typically block, inline, or inline-block before the inline style display: none was applied to them
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>
The jQuery show hide effect animated over a specified period of time. In jQuery, you can optionally specify the duration parameter (included referred to as speed)
By using one of the predefined string ‘slow’ or ‘fast’ or in a number of milliseconds to specify speed duration. As shown in the given example.
<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 duration and speed string ‘fast’ show the duration of 200 milliseconds, while 600 milliseconds show the string ‘slow’
With the help of show ( ) or hide ( ) method you can also specify a callback function to be executed after completes. As shown in the example given below. Further, we will learn more about the call back function in the upcoming session.
<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>
jQuery toggle ( ) Method
By using the jQuery toggle ( ) method, it will show or hide the elements. Hence, if the element is shown, it will disappear, and if the element is appearing it will show disappear.
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>
As shown in the given example. You can define the duration parameter for the toggle ( ) method to make animated like the show ( ) and hide ( ) method.
<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>
As shown in the given example, the toggle () method use to specify a callback function.
<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>
- 5 years ago
- Zaid Bin Khalid
- 9,557 Views
-
3