Cara Membuat Tombol Spoiler Show Hide

Cara membuat tombol spoiler show hide button widget atau gadget buka tutup di blog pada postingan sidebar header maupun di footer, maksudnya adalah ketika anda ingin memasukkan kode program teks atau gambar dengan cara tombol buka tutup, perhatikan contoh nya dibawah ini.

Berikut adalah contoh tombol show hide atau buka tutup, klik tombol show nya

CONTOH TEKS / KONTEN ATAU GAMBAR ANDA DISINI

Berikut kode dari contoh diatas

<div><div style="margin-bottom: 2px;">
<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: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
CONTOH TEKS / KONTEN ATAU GAMBAR ANDA DISINI
</div>
</div>
</div>

Atau contoh dari show hide yang lain nya perhatikan contoh nya dibawah, klik tombol show nya

CONTOH TEKS / KONTEN ATAU GAMBAR ANDA DISINI

Berikut kode dari contoh diatas

<div !mulai spoiler><div style="text-align:center;"><input style="width:100px; background-color:#e6e6e6; color:#000; border:1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;" value="Show" 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 = 'Hidden'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div> <div style="padding:5px; text-align:justify;"><div style="display: none;">CONTOH TEKS / KONTEN ATAU GAMBAR ANDA DISINI </div></div></div !akhir spoiler> 

Terima kasih telah berkunjung ke blog saya, mudah - mudahan anda tidak menemui kesulitan dalam memahami artikel tentang Cara Membuat Tombol Spoiler Show Hide