Here’s a simple tutorial on how to show/ hide a div using jQuery.
<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:
<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.
$(document).ready(function() {
$(".panel").delay(2000).fadeIn(500);
});
