Looking to build an expand on hover/contract on blur div

Question

Hey all, I\'ve been beating my head against the search engine walls for a couple hours now and figure I might as well just ask...

I need to build a div that is one s

Answer 1

If you add a transition to Robert's answer, it's CSS-only, and you get animation, too:

Add this to the div (not the div:hover): transition: height 0.5s ease-in;

I just implemented this on a site, and it even works well for mobile. The div does have to be a static height when collapsed and expanded, though.

Answer 2

Or you can add a .stop() before the .animate and the animation will stop immediately after you remove the pointer.

$('.div').hover(function() {
    $(this).stop().animate({
        height: '300px'
    }, 300);
},function() {
    $(this).stop().animate({
        height: '30px'
    }, 300);
});

Answer 3

You can use Psuedo-classes in CSS if you don't want an animation.

div.div {
   height: 30px;
   width: 300px;
   border: 1px solid black;
}

div.div:hover {
   height: 300px;
}​

Live Example

http://jsfiddle.net/aFUmS/

$('.div').hover(function() {
    $(this).animate({
        height: '300px'
    }, 300);
},function() {
    $(this).animate({
        height: '30px'
    }, 300);
});​

jQuery example if you want animation

http://jsfiddle.net/CvhkM/