CODEWITHSUNDEEP
jquery
Louis Stephens
Louis Stephens

Reputation: 790

Jquery: Expand Div Upwards

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>

Upvotes: 4

Views: 8099

Answers (2)

Ender
Ender

Reputation: 15221

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/

Upvotes: 8

cripox
cripox

Reputation: 542

$("#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

Upvotes: -1

Related Questions