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? 🙂
Please use this jQuery function:
$(document).ready(function() { $(".panel").delay(2000).fadeIn(500); });I’ve updated above tutorial with this change.
Is there a way I can use this as an overlay, instead of it pushing everything down? Thanks in advance!
Hi Skylar – yeah using mouse
:hovercss Element you could achieve this very easily.Works perfectly, except I have 5 items I’d like to show/hide independently of each other but when I click on the ‘show/hide’ link, they all show and/or they all hide. Is there a way to specify one at a time? Thanks and sorry, am quite the noob here!
You could do that. Just provide different class name for your blocks.
do you have an example of this?
Please help me. I wanted to ask. What if I wanted to use more than one div panels to hide and show
Hi Clovis. You could. What is your scenario?
Olá, eu também gostaria de usar mais de uma DIV, são 3 DIVs, cada um mostrará um mostrará um conteúdo.