It is very simple to hide and show a div with the help of show() and hide() jQuery functions, almost all of us know these functions.
To hide and show a div, a beginner would write a script like below:
|
1 2 3 4 5 6 7 8 9 10 11 |
$(function(){ $('#triggerToggle1').click(function(){ $('#div1').show(); $('#div2').hide(); }); $('#triggerToggle2').click(function(){ $('#div1').hide(); $('#div2').show(); }); }); |
If you see the above snippet, there are too many lines of code and the toggle works only if you have two buttons!!
But there are other plenty of ways you can toggle a div with these jQuery functions: toggle(), slideToggle() and fadeToggle()
Lets write an examples:
toggle() jQuery example without any animation:
|
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 |
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <style> #div1, #div2{ float:left; padding: 100px; font-size: 50px; background: lightblue; border: 1px solid gray; position: absolute; } </style> </head> <body> <a href="javascript:void(0);" id="triggerToggle">Click to Toggle</a> <br /> <div id="div1"> Content 1 </div> <div id="div2" style="display:none; background: yellow;"> Content 2 </div> <script type="text/javascript"> $(function(){ $('#triggerToggle').click(function(){ $('#div1').toggle(); $('#div2').toggle(); }); }); </script> </body> </html> |
If you want to add some animation effect then you can use either slideToggle() or fadeToggle().
Just replace the above jQuery part with this:
|
1 2 3 4 5 6 |
$(function(){ $('#triggerToggle').click(function(){ $('#div1').slideToggle(); $('#div2').slideToggle(); }); }); |
To see the fade animation replace the below code:
|
1 2 3 4 5 6 |
$(function(){ $('#triggerToggle').click(function(){ $('#div1').fadeToggle(); $('#div2').fadeToggle(); }); }); |
