Cara Buat Hide/Show Text ada Transisinya

Hallo sobat, met malem . . .
Sudah lama nih aku gx posting tulisan terbaru soalnya lagi sibuk banget nih ama tugas - tugas di dunia nyata (curcol) :)
ok, deh kali ini aku bakal posting tentang bagaimana cara membuat text hide/show menjadi lebih lembut seperti contoh di bawah ini :

klik untuk melihat/menutup

isi dokumennya sobat, bisa di isi sepanjang apapun dan juga menghemat ruang dan waktu, hahahaha

gimana, keren beudt kan hehehe, mau tahu gimana cara buatnya ??? mudah kok tinggal lihat langkah2 di bawah ini :

1. Login ke Blog sobat.
2. Masuk Dashboard sobat, kemudian pilih template
klik gambarnya biar lebih gede . . . . 

3. kemudian klik edit HTML
klik gambarnya biar lebih gede . . . . 

4. lalu sisipkan script ini
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
sebelum kata - kata "</head>"
klik gambarnya biar lebih gede . . . .

5. sekarang edit css-nya, tambahkan script dibawah ini sebelum (]]></b:skin>)
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
klik gambarnya biar lebih gede . . . .  

6. Klik simpan template deh, tunggu sebentar lalu kita lanjutkan ke langkah selanjutnya.
7. Masuk ke Dashboard blog sobat lagi lalu pilih buat entri baru

8. Pilih yang HTML lalu ketikkan seperti ini :
<div id="flip">klik untuk melihat/menutup</div>
<div id="panel">isi dokumennya sobat, bisa di isi sepanjang apapun dan juga menghemat ruang dan waktu, hahahaha</div>

Tulisan warna merah bisa di ganti sesuka hati, selesai deh
waduuh gak kerasa sudah larut malem, belum sholat isya' lagi . . .
ya udah ya, semoga bermanfaat bagi kalian semua