Animate div from bottom to top instead of top to bottom in jQuery [duplicate]

Question

I have a div which animates to its height when triggering a click function:

$('#menu').click(function() {
  $('#test').animate({
      height: 'toggle'
    }, 290, function() {    
  });
});

works good so far. But I want to animate the div from bottom to top and unlike seen in this fiddle.

Any solution?

Answer 1

You could put it in a container and position it absolutely?:

HTML:

<a href="#" id="menu">click me for menu</a>
    <div id="cont">
    <div id="test"></div>
</div>

CSS:

#cont{
    height:500px; width:50px; position:relative;
}
#test{
    height: 500px; width: 50px; background-color: #000; display: none; position:absolute; bottom:0; left:0;
}

JavaScript:

$('#menu').click(function() {
    $('#test').animate({
        height: 'toggle'
        }, 290, function() {
    });
});

Fiddle

Edit: Why it works
I've placed a container around the menu and given it the style position:relative. What I assume to be a menu (#test) has been given the style position:absolute meaning you can position it according to top,right,bottom and left, relative to the containing element (Provided it has a position other than the default hence we give the container a relative position). If we give the element a top:0;left:0 the top left of the element would stick to the top left of it's parent, similarly, if we did top:0;bottom:0 the bottom left of this element would stick to the bottom left of it's parent. Rambling, aren't I? So, to summarize, #test is 'stuck' to the bottom of it's parent, hence it animates from the bottom. Another quick point, the containers height is important! Because we have given #test an absolute position, it won't push the container to it's height, so we set the height to ensure #test loads 500px from the top of the container.