Cara Membuat Spoiler / Menyembunyikan dan Menampilkan Gambar dengan Form Button Link

Cara Membuat Tombol untuk Menyembunyikan dan Menampilkan Text dan Gambar

Sepertinya sobat sudah pada kenal yang namanya form button ya,pernah sebelumnya blog ini juga sharing bagaimana membuat form button dengan posisi berjejer alias horizontal.
Namun kali ini,Pelajaran Blog bukan sharing bagaimana membuat link form button melainkan membuat form button untuk menyembunyikan dan menampilkan sebuah teks atau image(gambar),atau yang sudah agan tahu dengan istilah spoiler.

Contohnya seperti di bawah ini:

Caranya,sobat tinggal masukkan kode dibawah ini pada postingan sobat ya :D


<div><input type="button" value="Lihat Gambar" style="margin:0px;padding:0px;" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Lihat Gambar'; }">
</div>
<div style="background: #ffffff; margin: 10px auto;
border: 0px solid #000;
padding: 5px;">
<div style="display: none;">
<img src="http://a0.twimg.com/profile_background_images/314865843/mrpujiajadeh.gif" alt="Cara Mudah dan Cepat Membuat Spoiler di Blogger" title="Cara Membuat Spoiler di Blogger." width="300" height="200"/>
</div>
</div>

Kode yang berwarna merah,adalah dimana obyek akan ditampilkan atau disembunyikan,bisa sobat ganti berupa teks saja,sebuah gambar maupun video kesukaan kamu,that's it :D