Here’s a simple tutorial on how to show/ hide a div using jQuery.
|
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<html> <head> <meta rel="author" href="https://crunchify.com" content=""> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".flip").click(function() { $(".panel").slideToggle("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip { margin: 0px; padding: 5px; text-align: center; background: #ddd; border: solid 1px #fff; } div.panel { widht: 50%; height: 100px; display: none; } </style> </head> <body> <div class="panel"> <p>This is simple jQuery Show/Hide Example by Crunchify...</p> <p>Click below Show/Hide again to Toggle visibility...</p> </div> <br> <p class="flip">Click here to Show/Hide Panel</p> <br> <br> <div align="center"> <div style="font-family: verdana; padding: 10px; border-radius: 10px; border: 3px solid #EE872A; width: 50%; font-size: 12px;"> Simple jQuery Example by by <a href='https://crunchify.com'>Crunchify</a>. Click <a href='https://crunchify.com/category/java-tutorials/'>here</a> for more than 150 examples.<br> </div> </div> </body> </html> |
Another must read:
Is there a link to the “latest” jQuery library on Google APIs?
The jQuery API has a number of hosts that have recent and up-to-date versions:
- http://code.jquery.com/jquery-latest.min.js – Most recent version, jQuery hosted
- http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js – Version 1.x family, Google hosted
For example:
|
1 |
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> |
If you remove the http: prefix, using Google’s hosted version of the jQuery API works seamlessly over both secure (https) and insecure (http) connections.
What if you want to expand div after 2 seconds onLoad (instead of mouse click)
Just put below code also after first jQuery function.
|
1 2 3 |
$(document).ready(function() { $(".panel").delay(2000).fadeIn(500); }); |
If i wanted to fire this open after 2 seconds onLoad (instead of mouse click) how would i do that? 🙂