Membuat Tombol Spoiler

Tombol spoiler yaitu tombol yang di gunakan untuk menampilkan atau menyembunyikan suatu obyek. Bisa sebuah gambar,video,ataupun text biasa.

Spoiler di maksudkan agar tampilan suatu web/blog lebih ringkas dan lebih nyaman di lihat.
Secara default, spoiler akan menyembunyikan obyek. Tetapi jika tombol di click maka objek akan tampil. Lihat Contoh di Bawah :

Spoiler:

Langsung saja dicoba, ni scriptnya gan :

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Spoiler</b>: <input value="Open" style="margin: 0px; padding: 0px; width: 55px; font-size: 11px;" 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" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Taruh kode atau text yang akan di sembunyikan di sini

<br>
</div>
</div>
</div>

Bila Kurang Jelas, silakan bertanya dibawah ini .

Post Info :
Judul = Membuat Tombol Spoiler

Url = http://wwdq.blogspot.com/2011/03/membuat-tombol-spoiler.html

Author = Riloaw. At : 13.10 Selasa, 29 Maret 2011 | Comment:0

Artikel Terkait

Tutorial