javascript - 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()