<!-- CSS -->
<style type="text/css">
body {
    margin: 0 auto;
    padding: 0;
    width: 570px;
    font: 75%/120% Arial, Helvetica, sans-serif;
}

a:focus {
    outline: none;
}

#panel {
    background: #blue;
    height: 100px;
    display: none;
    font-size: 20px;
    font-style: italic;
}

.slide {
    margin: 0;
    padding: 0;
    border-top: solid 10px  #422410;
    background: url(../../public/images/jquery/btn-slide.gif) no-repeat center top;
}

.btn-slide {
    background: url(../../public/images/jquery/white-arrow.gif) no-repeat right -50px;
    text-align: center;
    width: 144px;
    height: 31px;
    padding: 10px 10px 0 0;
    margin: 0 auto;
    display: block;
    font: bold 120%/100% Arial, Helvetica, sans-serif;
    color: #black;
    text-decoration: none;
}

.active {
    background-position: right 12px;
}
</style>

<!-- Body -->
<div id="panel">
    <!-- you can put content here -->
    <span style=color:yellow;>Hi, slide-panel</span>
</div>

<p class="slide"><a href="#" class="btn-slide">下拉面版</a></p>

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