Cara membuat Show Hide Button pada Blog

Tombol Show / hide pada blog berfungsi untuk menyembunyikan gambar atau teks yang terlalu panjang sehingga bisa menghemat tempat pada postingan.

Kode dibawah ini bisa diletakkan dimana saja anda suka pada postingan anda.

<div style="text-align: center;">
<div class="button-spoiler">
<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'; }" type="button" value="Show" /></div>
<div class="spoiler">
<div style="display: none;">
<div style="border: 3px inset #333; font-size: small; padding: 10px; text-align: left;">
Isi tulisanmu atau gambar.


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

yang saya beri warna merah silahkan isi dengan teks atau gambar yang ingin anda sembunyikan.