Earlier we looked into how we can use jQuery get attribute, today we will look into three useful jQuery methods that we can use to hide an HTML element, show any hidden HTML element and toggle it from hidden/shown.
These methods are used a lot in real web pages, where you get to see the data on click of a button. On click again, the data is again hidden. Let’s look into these methods one by one now.
jQuery hide
jQuery hide() method is used to hide the html elements. The element will not be displayed until show() method is called for that element.
We can use hide() method in a number of ways.
-
- hide();
This method hides the selected html element. This jQuery hide method doesn’t take any arguments.
-
- hide(speed);
The argument ‘speed‘ determines the duration of this effect.
-
- hide(speed, callback);
speed: determines the duration of this effect. String values like “slow”, “fast” and the numeric value in milliseconds are normally used.
callback: you can specify what to do after the hide() method is called.
- hide(speed, easing, callback);
In this method an additional argument is passed – ‘easing’. This is a string value. “swing” and “linear” are the two values used to specify which easing function is used to run during the hiding effect.
jQuery hide() example
In the below example you can see that jQuery hide() method takes an argument “fast” to hide the <div> element. You can use arguments like “slow” or milliseconds values like 1000, 2000 etc.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <title> jQuery Hide </title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <style> div{ width: 130px; height: 50px; padding: 15px; margin: 15px; background-color: green; } </style> <script> $(document).ready(function(){ $(".hideBtn").click(function(){ $("div").hide("fast"); }); }); </script> </head> <body> <div>Hiding Div</div> <button class="hideBtn">Hide</button> </body> </html> |
jQuery hide() and callback example
In this example, three arguments are passed to the hide() method. The numeric value 1000 is the duration of hiding effect. “linear” is the easing function used. There is a callback method also passed to the hide method. This method is called after the hide effect.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <style> div{ width: 130px; height: 50px; padding: 15px; margin: 15px; background-color: green; } </style> <script> $(document).ready(function(){ $(".hidebtn").click(function(){ $("div").hide(1000,"linear",function(){ alert("Hide() method is finished!"); }); }); }); </script> </head> <body> <div> Hide and Call back</div> <button class="hidebtn">Hide</button> </body> </html> |
jQuery hide method is very useful when there is a need to hide certain HTML elements. You can select appropriate hide() methods with and without arguments depending on the requirement. This is a very handy method in jQuery web design.
jQuery show
jQuery show() method is used to display the hidden html elements.
We can use show() method in a number of ways.
-
- show();
This method displays the selected html element. This method does not take any arguments.
-
- show(speed);
The argument ‘speed‘ determines the duration of this effect.
-
- show(speed, callback);
speed: this argument determines the duration of this effect. String values like “slow”, “fast” and the numeric value in milliseconds are normally used.
callback: you can specify what to do after the show() method is called.
- show(speed, easing, callback);
In this method an additional argument is passed- ‘easing’. This is a string value. “swing” and “linear” are the two values used to specify which easing function is used to run during the displaying the selected element.
jQuery show() example
In the below example you can see that show() method takes an argument “fast” to display the <div> element.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <title> jQuery Show </title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <style> div{ width: 130px; height: 50px; padding: 15px; margin: 15px; background-color: green; } </style> <script> $(document).ready(function(){ $(".hideBtn").click(function(){ $("div").hide("fast"); }); $(".showBtn").click(function(){ $("div").show("fast"); }); }); </script> </head> <body> <div>Hide and Show - Speed</div> <button class="hideBtn">Hide</button> <button class="showBtn">Show</button> </body> </html> |
Below GIF shows the jQuery hide and jQuery show example page in action.
jQuery show and callback example
In this example, three arguments are passed to the show() method. The numeric value 1000 is the duration of display effect. “linear” is the easing function used. There is a callback method also passed to the show method. This method is called after the displaying the <div> element.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html> <head> <title> jQuery Show with callback</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <style> div{ width: 130px; height: 50px; padding: 15px; margin: 15px; background-color: green; } </style> <script> $(document).ready(function(){ $(".hidebtn").click(function(){ $("div").hide(1000,"swing",function(){ alert("Hide() method is finished!"); }); }); $(".showbtn").click(function(){ $("div").show(1000,"swing",function(){ alert("Show() method is finished!"); }); }); }); </script> </head> <body> <div> Hide and Show </div> <button class="hidebtn">Hide</button> <button class="showbtn">Show</button> </body> </html> |
This method is very useful when you want to display the hidden HTML elements. You can select appropriate show() methods with and without arguments depending on the requirement.
jQuery toggle
jQuery toggle() method is used to change the to display or hide HTML elements. You can use the toggle method when you want to toggle between the hide and display of the selected HTML element
We can use jQuery toggle() method in a number of ways.
-
- toggle();
This method displays the selected html element. This method does not take any arguments.
-
- toggle(speed);
The argument ‘speed‘ determines the duration of this effect.
-
- toggle(speed,callback);
speed: this argument determines the duration of this effect. String values like “slow”, “fast” and the numeric value in milliseconds are normally used.
callback: you can specify what to do after the toggle() method is called.
- toggle(speed,easing,callback);
In this method an additional argument is passed- ‘easing’. This is a string value. “swing” and “linear” are the two values used to specify which easing function is used to display/hide.
jQuery toggle() example
In the below example you can see that toggle() method takes an argument “fast” to toggle between hide and display the selected <div> element.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <title> jQuery Toggle </title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <style> div{ width: 130px; height: 50px; padding: 15px; margin: 15px; background-color: green; } </style> <script> $(document).ready(function(){ $(".togglebtn").click(function(){ $("div").toggle("fast"); }); }); </script> </head> <body> <div>Toggle - Speed</div> <button class="togglebtn">Toggle</button> </body> </html> |
jQuery toggle and callback example
In this example, three arguments are passed to the toggle() method. The numeric value 1000 is the duration of display effect. “linear” is the easing function used. There is a callback method also passed to the toggle method. This method is called after the toggle between hide and display of the <div> element.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <title>jQuery Toggle with callback</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <style> div{ width: 130px; height: 50px; padding: 15px; margin: 15px; background-color: green; } </style> <script> $(document).ready(function(){ $(".togglebtn").click(function(){ $("div").toggle(1000,"swing",function(){ alert("toggle() method is finished!"); }); }); }); </script> </head> <body> <div> Toggle - Callback </div> <button class="togglebtn">Toggle</button> </body> </html> |
jQuery toggle method is very useful when you want to toggle between the hide and display the HTML elements. You can select appropriate toggle() methods depending on the requirement.
jQuery hide show toggle Demo
- jQuery hide demo
- jQuery hide with callback demo
- jQuery show demo
- jQuery show with callback demo
- jQuery toggle demo
- jQuery toggle with callback demo
That’s all for the jQuery methods that we can use to Hide, Show or Toggle HTML DOM elements.