slider

by Ajay Patel

HTML

<div id="panel">
    <!-- you can put content here -->
    <center><h1>hi all</h1></center>
</div>

<p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>

CSS

body {
    margin: 0 auto;
    padding: 0;
    width: 570px;
    font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
    outline: none;
}
#panel {
    background: #754c24;
    height: 100px;
    display: none;
}
.slide {
    margin: 0;
    padding: 0;
    border-top: solid 4px #422410;
    background: url(http://nodejs.org/logo.png) no-repeat center top;
}
.btn-slide {
    background: url(http://nodejs.org/logo.png) 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: #fff;
    text-decoration: none;
}
.active {
    background-position: right 12px;
}

JavaScript

$(document).ready(function(){

    $(".btn-slide").click(function(){
      $("#panel").slideToggle("slow");
      $(this).toggleClass("active");
    });
    
});