Widget Slide Panel dengan JQuery dan CSS3

Mau?
Simple Saja.

Copas kode berikut ke HTML/Javascript.

<style type="text/css">
#paneltovik{display:block;}
#panel{background-color:#CAC19B;border:2px solid #a7cc54;border-width:2px 2px 0 2px;height:250px;overflow:auto;margin:0;padding:10px;color:#111;
font:normal 12px Times,Serif;box-shadow:inset 0 0 7px #222;-moz-box-shadow:inset 0 0 7px #222;-webkit-box-shadow:inset 0 0 7px #222;display:none;}
.tombolpanel{position:relative;cursor:pointer;text-shadow:1px 1px 2px #000;padding:7px 15px;background-color:#333;border-top:3px solid #a7cc54;color:#e5e5e5;text-align:center;font:bold 14px Times,Sans-Serif;font-style:italic;box-shadow:0 -1px 2px #222;-moz-box-shadow:0 -1px 2px #222;-webkit-box-shadow:0 -1px 2px #222;border-radius:0 0 14px 14px;-moz-border-radius:0 0 14px 14px;-webkit-border-radius:0 0 14px 14px;}
.tombolpanel:hover{color:#ccc;}
.tombolpanel:after{content:'';position:absolute;top:100%;margin-top:-10px;left:5%;width:0;height:0px;display:block;border-width:20px;border-style:solid;border-color:#333 #333 transparent #333;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.tombolpanel').click(function(){$('#panel').slideToggle('slow');
$('.tombolpanel span.in').toggle();
});
});
</script>
<br />
<div id="paneltovik">
<div id="panel">

<!-- KONTEN DI SINI -->

</div>
<div class="tombolpanel">
<span class="in">Buka Panel</span>
<span class="in" style="display: none;">Tutup Panel</span>
</div>
</div>

Klik Save.

Keterangan: ganti kode warna merah dengan kata-kata yang anda inginkan.