Jquery: Expand Div Upwards

Question

Alright, I have a div which is 50px (height), and the width does not matter that has a title displayed. I want to use jquery, so when I hover over the div it expands upwards to (70px) to reveal the content hidden below the title

<div id="box">
<h1>Title Goes Here</h1>
<p>this is the hidden text</p>
</div>

Answer 1

$("#box").hover(function(){
    $("#box").css('height','70px');
}, function(){
    $("#box").css('height','50px');
});

EDIT: I just understood how you want to expand only upwards. I have just a solution for this, if your design permits this: use position:absolute and a bottom:x value. The box will expand upward

Answer 2

This snippet should do the trick:

$(function() {
    $("#box").hover(function() {
        $("#box").animate({'height': '70px', 'top': "-20px"});
    }, function() {
        $("#box").animate({'height': '50px', 'top': "0px"});
    });
});

Here's a live demo: http://jsfiddle.net/MeBxJ/