Cara Membuat Tombol Show Dan Hide Seperti Di Kaskus

Ketika Saya baru pertama kali blogging, Saya mencari cara untuk meletakkan script atau kode yang sangat panjang dan ribet, dari kotak scroll sampai text area dan masih banyak lagi cara meletakkan script dengan mudah dan simple. Tidak sengaja Saya berkunjung ke kaskus dan mulailah otak Saya berfikir karna melihat tombol show hide nya kaskus. Dan bertanya kepada mbah google dan akhirnya ketemu cara untuk membuat tombol show hide seperti di kaskus.

Tanpa berlama lama Saya akan membahas cara memasangnya.
Lihat seperti di bawah ini ↓

Spoiler for title :

Spoiler for title : <div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler</b> for <i>title</i> : <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 75px;" type="button" value="Show" /></div>
<div class="alt2" style="-moz-background-inline-policy: continuous; background: none repeat scroll 0% 0% rgb(225, 228, 242); border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

isi dengan tulisan atau gambar

</div>
</div>
</div>

Selamat Mencoba !