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

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/