CARA MEMBUAT SPOILER HIDE/SHOW TEKS DAN GAMBAR

Kali ini saya akan berbagi ilmu tentang menyembunyikan (hide) dan menampilkan (show) Teks atau Gambar pada Postingan blog kita. Jika sulit mengartikan kata-kata saya barusan, seperti inilah yang saya maksud:

TULISAN ATAU GAMBAR YANG INGIN DISEMBUNYIKAN/TAMPILKAN

Tampilan seperti di atas selain akan menambah keren postingan juga bisa difungsikan pada blog pendidikan jika ingin menampilkan/menyembunyikan jawaban suatu soal. Atau bisa juga digunakan untuk menyembunyikan judul postingan lain yang mempunyai tag yang sama. Atau kegunaan lainnya sesuai dengan keinginan kita masing-masing. Selamat mencoba.

Dan untuk kode HTML-nya dibawah ini:

<div mulai="" spoiler="">
<div style="text-align: center;">
<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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" style="-moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #e6e6e6; border-radius: 5px; border: 3px solid #ccc; color: black; width: 110px;" type="button" value="Tampilkan" /></div>
<div style="padding: 5px; text-align: justify;">
<div style="display: none;">
TULISAN ATAU GAMBAR YANG INGIN DISEMBUNYIKAN/TAMPILKAN</div>
</div>
</div>

Mungkin itu saja saja isi postingan saya kali ini, semoga bermamfaat, ketemu lagi di postingan yang lain.

Bagikan Artikel ini