Efek tombol toggle

Fungsi toggle yang saya tahu adalah perintah pemberi efek animasi pada suatu element di HTML.
Seperti contoh di bawah ini:

This isi paragram the paragraph to end all paragraphs. You
should feel lucky to have seen such a paragraph in
your life. Congratulations!
:v::v::v::v::v:

Bagaimana cara membuatnya?

Copy Script berikut:

<button id="tombol">Toggle</button>
<div id="isi">
This is the paragraph to end all paragraphs. You
should feel <em>lucky</em> to have seen such a paragraph in
your life. Congratulations!</div>
<script type="text/javascript">
$(document).ready(function() {
$('#tombol').click(function() {
$('#isi').toggle(800);
});
});
</script>

Keterangan:
Warna hijau adalah id tombol perintah untuk menjalankan efek toggle
Warna Biru merupakan elemen yang diberi efek.
Untuk mempercepat/memperlambat silahkan ganti angka toggle yang berwarna merah

Membuat tombol Toggle mirip dengan Spoiler?

Apa itu spoiler? :27::27:
Yupss...tombol yang dipakai untuk membuka dan menyembunyikan suatu elemen di HTML. Cara membuat spoiler sudah saya buat posting sebelumnya silahkan kunjungi posting ini Membuat Spoiler di Blog .
Berikut ini tombol Toggle yang dimodifikasi menjadi fungsi spoiler. Atau bisa juga disebut spoiler menggunakan toggle..hehehe :haha::haha:

Tombol toggle yang sudah di modifikasi menjadi spoiler

<button id="tombol">Toggle</button>
<div id="isi" style="display: none;">
This is the paragraph to end all paragraphs. You
should feel <em>lucky</em> to have seen such a paragraph in
your life. Congratulations!
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#tombol').click(function() {
$('#isi').toggle(800);
});
});
</script>

Keterangan:
pada elemen isi tinggal tambahin style="display: none;" artinya disembunyikan.

Modifikasi Tombol Toggle?

modifikasi tombol toggle sama seperti tombol-tombol pada umumnya tinggal kita tambahin style="...."

<button id="tombol" style="background: #006699; border: 1px solid #234B69; color: white; font-family: Arial, Tahoma, Verdana; font-size: 11px; font-weight: bold; margin-left: 5px; padding: 3px 5px 3px 5px;" >Toggle</button>
<div id="isi" style="display: none;">
This is the paragraph to end all paragraphs. You
should feel <em>lucky</em> to have seen such a paragraph in
your life. Congratulations!
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#tombol').click(function() {
$('#isi').toggle(800);
});
});
</script>

Selamat Mencoba.. :c::c::c:
Terimakasih..