Feeds:
Posts
Comments

Archive for the ‘JQuery’ Category

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 🙂

 

 

Advertisements

Read Full Post »