Cara Buat Tombol Hide and Show (Spoiler)

Tombol Hide and show lebih populer dengan sebutan Spoiler. Mungkin, dari namanya saja "Hide and Show" sobat blogger sudah tau fungsi dari tombol ini. Tidak tau? Ya sudah, saya jelaskan sedikit. Hide dalam bahasa Indonesia berarti menyembunyikan dan Show dalam bahasa Indonesia berarti menunjukkan. Jadi, tombol Spoiler berfungsi untuk menyembunyikan teks, Link atau gambar. Spoiler ini sangat bermamfaat buat blog karena dengan adanya spoiler, kita bisa menghemat tempat kalau kita gunakan saat menulis
artikel dan bisa menghemat tempat juga kalau kita gunakan sebagai Widget atau Gadget. Kita bisa menempatkan kode Hide and Show atau spoiler pada tempat yang kita inginkan (Kolom Postingan atau Kolom HTML/Java Script), baiklah berikut kodenya :

<div><div style="margin-bottom: 2px;"><i><b><small>Klik disini</small></b></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px;font-size: 10px;" 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'; }" type="button"></div><div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">

TULISAN, LINK ATAU URL GAMBAR BISA DILETTAKKAN DISINI </div></div></div> 

dan hasilnya seperti berikut :

Klik disini 

TULISAN, LINK ATAU URL GAMBAR BISA DILETTAKKAN DISINI

gampang kan, silahkan sobat edit lagi kodenya kalau mau, sesuai keinginan sobat, 
OK selamat mencoba, Semoga Sukses.