Slide Down Div using JQuery
|
10:44 |
No Comments |
jQuery slidedown() method is used to slide down an element.
In this example , when we click on the div then other div sliding slowly in down side and show on the web page.
Let's see the example :
File Name : index.html
Output :
In this example , when we click on the div then other div sliding slowly in down side and show on the web page.
Let's see the example :
File Name : index.html
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> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown("slow"); }); }); </script> <style> #panel, #flip { padding: 5px; text-align: center; background-color: #33FFD4; border: solid 3px #084236; } #panel { padding: 50px; display: none; } </style> </head> <body> <div id="flip">Click to slide down panel</div> <div id="panel">Hello World Good Morning...</div> </body> </html> |
Output :
