Cara Membuat Tombol untuk Menyembunyikan dan Menampilkan Text dan Gambar (Spoiler)

Advertise

Abdul Hamid Info - Sepertinya Sobat sudah pada kenal yang namanya form button ya, kali ini membuat link form button untuk menyembunyikan dan menampilkan sebuah teks atau image(gambar), atau yang sudah agan tahu dengan istilah spoiler

Contohnya seperti di bawah ini:

Isi Konten

Caranya, sobat tinggal masukkan kode dibawah ini dalam postingan.

<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;">
Isi Konten
</div> </div>

Kode yang berwarna merah, adalah dimana obyek akan ditampilkan atau disembunyikan, bisa sobat ganti berupa teks saja, sebuah gambar maupun video kesukaan. juga masih bisa dimodifikasi sesuai keinginan sobat. selamat mencoba.

Baca Juga

Halaman: