Hai
Today when i was working for a web project, i learnt how to create a simple toggle effect in JQuery.
Here’s my code to illustrate this ( slide toggle ) effect
Prerequisite:
Download jquery.js file from here
Code:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".demo").click(function(){
$(".content").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.content,p.demo
{
margin:0px;
padding:5px;
text-align:center;
background:gray;
border:1px solid blue;
}
div.content
{
height:50px;
display:none;
}
</style>
</head>
<body>
<div class="content">
<p>Example for Slide Toggle effect<p>
</div>
<p class="demo">Show/Hide Content</p>
</body>
</html>
When you run the above code, you can see a nice toggling effect
And yes, JQuery is awesome 🙂
sraji.wordpress.com 