codesnippets.info

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

#panel     { background: #754c24; height: 200px; display: none;}
.slide     { margin: 0; padding: 0; border-top: solid 4px #422410; }
.btn-slide { text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0;
             margin: 0 auto; display: block; color: #fff; text-decoration: none;
             font: bold 120%/100% Arial, Helvetica, sans-serif;}
.active    { background-position: right 12px;}

<div style="display: none;" id="panel">
	<!-- you can put content here -->
</div>
<p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>

You may want to check :

1. disappearing effect, close panel button
2. global css general set of rules
3. boilerplate typography css framework
4. RMS css forms framework
5. Golden Grid css framework library