Cara Membuat Show - Hide [Spoiler] di dalam postingan

Karenan banyak yang nanya akhirnya saya tulis juga deh tentang cara membuat Show - Hide atau Spoiler ini. Spoiler ini berguna untuk mengoptimalkan halaman postingan agar tidak terlalu panjang kebawah atau mungkin Spoiler ini bisa juga kita katakan sebagai pembuat ringkasan dalam suatu postingan, yah hampir sama seperti readmore lah...^_^ tapi kalau yang ini kita tidak perlu meng-Load ulang halaman web / blog kita.

Live Demo

Ini dia kode script untuk membuat Show-hide [spoiler]

Silahkan Copy - Paste kode dibawah. Supaya lebih mudah: klik tombol Select All lalu tekan CTRL + C atau boleh juga klik kanan lalu pilih copy

<div id="spoiler"><div><input value="Show Spoiler" style="margin: 5px; padding: 3px; font-size: 11px; font-weight:bold;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler'; }" type="button"><div id="show" style="margin: 5px; padding: 2px; display: none; width: 98%;">Type your post here...</div><div id="hide"></div></div></div>

Ganti saja tulisan Type your post here... dengan tulisan yang ingin kamu buat spoilernya.

Ok. Sekian dulu smoga berhasil untuk mempraktekkannya.