Membuat Menu Auto Hide (Spoiler)

baik sobat blog, sobat blog mungkin bingung tentang judul diatas. Baiklah saya akan menjelaskannya secara detail, yang dimaksud dengan Menu Auto Hihe (Spoiler) adalah berupa tombol yang jika diklik maka disana akan memunculkan isi dari yang dituliskan didalamnya.
contohnya adalah seperti ini:

ISI DENGAN CONTENT YANG INGIN DISEMBUNYIKAN

silahkan gunakan code ini:

<div><div style="margin: 20px; margin-top:5px"><div style="margin-bottom: 2px;" class="smallfont"><input style="margin: 0px; padding: 5px; width: auto; " 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 class="alt2"><div style="display: none;"><div style="border: none; color:none; background-color:none; text-align: justify; padding:10px;">
ISI DENGAN CONTENT YANG INGIN DISEMBUNYIKAN
</div></div></div></div></div>

keterangan: pada tulisan yang berwarna merah, bisa diganti sesuai dengan
selera anda.
Sedangkan yang berwarna hijau adalah tempat untuk
meletakkan content yang ingin disembunyikan.

selamat mencoba...

Ini adalah Bagian data yang disembunyikan didalam tombol.
Sobat dapat menaruh konten yang ingin disembunyikan disini.

Bagikan Artikel Ini :