Membuat Tombol Menu Spoiler

Tidak sengaja aku baca buku tutorial html di perpustakaan daerah di kotaku, eh aku menemukan tutorial bagus nuy :) Judulnya yaitu membuat menu spoiler! Awalnya aku juga tidak tahu apa itu menu spoiler! Maklum baru berurusan dengan blog di akhir tahun 2008! Ok kembali lagi ke topic tapi ngomong-ngomong pada tahu tidak apa itu menu/tombol spoiler, ngg.. sebenarnya aku juga tidak bisa menjelaskan sih! So aku contoh saja ya menu spoiler ini :D

Ini adalah data/file yang disembunyikan

Nah sudah lihat fungsinya kan? Tombol spoiler bisa digunakan untuk menyembunyikan file berupa teks, gambar, widget, dll. sehingga saat tidak dibutuhkan tidak memakan tempat terlalu banyak! So langsung saja kalau ada yang mau mebuat menu seperti di atas copy kode di bawah ini dan paste di tempat yang diinginkan!

<div><div style="margin: 5px;"><div class="smallfont" style="margin-bottom: 2px;"><input value="Open" style="margin: 0px; padding: 0px; width: auto; font-size: 10px;" 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button"/></div><div class="alt2"><div style="display: none;"><div style="border: 1px dotted #05fbfb; text-align: justify;">Ini adalah data/file yang disembunyikan</div></div></div></div></div>

Anda bisa mengganti bagian yang berwarna merah dan biru sesuka hati Anda :) Dan teks yang berwarna hijau adalah isi dari menu spoiler tersebut, gantilah teks tersebut dengan teks, gambar atau widget yang Anda Inginkan! Kalau mau Anda juga bisa mengotak-atik bagian tag stylenya untuk mendapatkan hasil yang paling cocok dengan Anda!

Semoga tutorial yang tidak sengaja kutemukan ini berguna yah :p