Animate a div using jquery

Want to Show/hide a div content using  jquery Animate function.it easy and browser independent

Step-1: Declare a hyperlink and in the onclick event call a javascript function where we are going to write the animate function for the div.

<a href=”javacript:;” onclick=”javscript:showHideDiv();”>Show hide</a>

Step-2: Write the div and give a ID as xyz. Then make sure at the time of page load the div content should not visible on the browser.so for that i am using display:none property of inline CSS.

<div id=”xyz” style=”display:none;”>

<h1>Div Content goes here</h1>

</div>

 

Step-3: Declare a function for Div show/hide in the head section of your html page.

<script type=”text/javscript”>

function showHideDiv()

{

$(“#xyz”).animate({height:’toggle’},500);

}

</script>

 

Full code

<html>

<head>

<script src=”jquery.js”¬† type=”text/javascript”></script>

<script type=”text/javscript”>

function showHideDiv()

{

$(“#xyz”).animate({height:’toggle’},500);

}

</script>

</head>

<body>

<div id=”xyz” style=”display:none;”>

<h1>Div Content goes here</h1>

</div>

</body>

</html>