jQuery: Slidetoggle from bottom to top

javascript, jquery, slide, toggle

Solution

Do you want to achieve something like this?

HTML

<div id="box">
    <div id="panel">
    </div>
</div>​

CSS

#box
{
    height: 100px;
    width:200px;
    position:relative;
    border: 1px solid #000;
}
#panel
{
    position:absolute;
    bottom:0px;
    width:200px;
    height:20px;
    border: 1px solid red;
    display:none;
}

JS

$("#box").hover(function(){
    $("#panel").slideToggle();
}, function(){
    $("#panel").slideToggle();
});​

OR as per Update suggested by Roko

var panelH = $('#panel').innerHeight();

$("#box").hover(function(){
    $("#panel").stop(1).show().height(0).animate({height: panelH},500);
}, function(){
    $("#panel").stop(1).animate({height: 0},500, function(){
      $(this).hide();  
    });
});​

Problem

I am using jQuery's slidetoggle, and I am wondering if there is a way I can make it slide up from the bottom, everywhere I look I cant seem to find the answer, here is the code I am using: ``` jQuery(document).ready(function(){ jQuery(".product-pic").hover(function(){ jQuery(this).find('.grid-add-cart').slideToggle('2000', "easeOutBack", function() { // Animation complete. }); }); }); ```

Original source