Change jQuery element toggle

Question

I have this example with a div which show / hide from the top, but I need it from the bottom to the top, I was trying to change some code, but I couldn't, and I didn't find any example.

<script type="text/javascript">
$(document).ready(function(){
    $(".btn-slide").click(function(){
        $("#panel").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
});
</script>

Slide Panel

<div id="panel">
    <!-- you can put content here -->
</div>

Answer 1

You can also use the animate effect( http://api.jquery.com/animate/ ) and change the height of the div.

$(document).ready(function(){
$(".btn-slide").click(function(){
if($('#panel1').height=='0')
$("#panel1").animate({height:"140px"},{duration:1000});
else
$("#panel1").animate({height:"0px"},{duration:1000});

    });
});

this will act as a toggle as well as amimate from bottom

Answer 2

You probably want to use slide effect provided by the jQuery UI. It allows you to define the direction as well.

Answer 3

You might want to use animate option in jquery, here is the code

HTML

<button class="btn-slide">Some Text</button>
<div id="box">
<div id="panel">Sample Text here<br/> Sample Text here<br/>Sample Text here</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;
}

JQUERY

var panelH = $('#box').innerHeight();
$(".btn-slide").click(function(){
$("#panel").stop(1).show().height(0).animate({height: panelH},500);
});
});