Tuesday, August 9, 2011

Using JQuery create sliding toggle box

This simple jquery tutorial i will trying to create jquey sliding box. First of all create a css file with the following classes
.box
{
width:500px;
height:200px;
background-color:#57C1EA;
margin:0px auto;
padding:20px;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF
}
.container
{
width:500px;
height:250px;
margin:0px auto;
text-align:center;
}

The create a html file.In that file create a class with "container" and in that div create a another div with the class "box" out side the box div create a button with the id "anim" and then include a jquery header file inside the header and inside the script area copy paste the following code.


$(document).ready(function(){

$('#anim').click(function(){
$('.box').animate({
opacity:'toggle',
height:'toggle'
},'slow');

});

});
I think this will help the web designers.