顯示和隱藏div從底部到頂部

Question

我有這個例子，顯示/隱藏頂部的div，但我需要從底部到頂部，我試圖更改一些代碼，但我不能，我沒有找到任何例子。

<style type="text/css"> 

#top-panel{ 
    background:#cc22ff; 
    border-bottom:3px solid #a6c34e; 
    padding:14px 20px; 
    text-align:right; 
} 
#sub-panel{ 
    text-align:center; 
} 
#sub-panel a{ 
    width:150px; 
    float:right; 
    color:#FFFFFF; 
    text-decoration:none; 
    margin-right:30px; 
    font-weight:bold; 
    background:url(img/sub-left.png) bottom left no-repeat #a6c34e; 
} 
#sub-panel a span{ 
    padding:6px; 
    background:url(img/sub-right.png) right bottom no-repeat; 
    display:block; 

} 
strong{color:#000000;} 
.face{border:solid 2px #a6c34e; margin-left:10px; float:right;} 
:focus{outline:0} 
</style> 


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    // Lets make the top panel toggle based on the click of the show/hide link 
    $("#sub-panel").click(function(){ 
     // Toggle the bar up 
     $("#top-panel").slideToggle(); 
     // Settings 
     var el = $("#shText"); 
     // Lets us know whats inside the element 
     var state = $("#shText").html(); 
     // Change the state 
     state = (state == 'Hide' ? '<span id="shText">Mostrar</span>' : '<span id="shText">Ocultar</span>');      
     // Finally change whats insdide the element ID 
     el.replaceWith(state); 
    }); // end sub panel click function 
}); // end on DOM 
</script> 


<div id="top-panel"> 
<strong>titulo</strong><br /> 
contenido 
</div> 
<div id="sub-panel"><a href="#" id="toggle"><span id="shText">Ocultar</span></a></div> 

Answer 1

使用$("#top-panel").slideUp();代替slideToggle()