Membuat slide panel efek jquery UI

Slide panel ini di sentuh lagi dengan efek jquery UI sehingga efek yang di hasilnya itu lebih keren pokoknya beda dari yang lain. emm gimana tampilannya yahhh penasaran gak..? hehehe langsung aja ya liat demonya.

DEMO

Klik Deh tuh kotak slide panel yang ada disana dan lihat efeknya slide panel ini bisa anda manfaatkan untuk menyembunyikan konten berupa teks, gambar ataupun kode juga bisa itu terserah anda mau di manfaatkan untuk apa, nah sekarang siapkan Gadget HTML/Javascript dan masukan kodenya di bawah ini.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle(600, "easeOutBounce")
$(this).toggleClass("active"); 
return false;
});
});
</script>
<style type="text/css">
a:focus {
    outline: none;
}
#panel {
    background: #555;
    border:1px solid #000;
    color:#FFFFFF;
    height: auto;
    display: none;
    text-align:justify;
}
.slide {
    margin: 0;
    padding: 0;
    border-top: solid 4px #422410;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVEvyUcRJ6pJnTsScd05-oD-bQMs4HKjwzIqw9jHRkMbnD2SoofwbDh8Qu6-C3jObGuq5lkQOYWgf8sBgdoqjvyR4KM5_3h9F5LsABszW4zzTjFBajEjVEnYCy8q8JjnMcvBaZ50mqbc4/s1600/btn_slide_panel.png) no-repeat center top;
}
.btn-slide {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK6x3RUvICA0snt8ogBTh4mtt26q1lznygA2umepgY2KYNPG_3eXcCudWVCMBBQKJotpXy_ug62OeSkuNVlxvurorxjhoyalON0nPS4YIRdrUiZw7Y4TtblaZr_Ka2xAy4lMBFGK-avUM/s1600/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: #fff;
    text-decoration: none;
}
.active {
    background-position: right 12px;
}
</style>
<div id="panel">

Disini isi konten sesuai pilihan anda.

</div>
<div class="slide"><a class="btn-slide" href="url"></a></div>

Nah SIMPAN Deh, kalau misalnya di blog anda sudah ada jquery yang bergaris bawah itu, gak usah lagi anda copy kode jquery nya cukup yang di bawahnya aja.