Cara Membuat Tombol Show dan Hide Seperti di Kaskus

Kali ini Saya akan membahas 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 karena melihat tombol show hide kaskus. Mulailah Saya bertanya kepada mbah google dan akhirnya ketemu cara untuk membuat tombol show hide seperti di kaskus. Tanpa berlama-lama Saya akan membahas cara memasangnya.

Caranya seperti di bawah ini :

  • Copy paste script di bawah ini ketika Anda mau membuat artikel dan letakkan di HTML bukan Compose
  • Ukuran kotak bisa Anda atur sendiri dengan mengubah width atau heightnya

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>

Semoga Bermanfaat !