Expand/Collapse Div on Hover

by Stanly Pokrowsky

HTML

<div id="test">Test</div>

CSS

#test {
    display:block;
    background:#FF0000;
    height:0;
    width:300px;
}

JavaScript

var divTest = $("#test").height();
$("#test").on("hover",
function(){
   $("#test").animate( { height: '100%' }, { queue:false, duration:500 });
},
function(){
   $("#test").animate( { height:'50px' }, { queue:false, duration:500 });
});