Minggu, 03 Maret 2013

Cara Membuat Tombol Spoiler (Show/Hide)

Spoiler atau tombol show/hide ini memiliki fungsi yang tidak jauh berbeda dengan text area atau pun fungsi scrol.cara kerja spoiler ini adalah anda bisa menaruh artikel atau gambar bahkan kode script yang nantinya hanya di tampilkan sebuah tombil yang apabila di klik akan menampilkan isi dari spoiler tersebut.Spoiler ini bisa anda letakkan di postingan maupun sidebar anda jadi kalau anda tidak mau postingan atau sidebar anda terlihat penuh saya sarankan anda untuk menggunakan spoiler ini.
By : Dedi Setiawan Syahputra:




 <div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><b>By : Dedi Setiawan Syahputra</b>: <input value="Tampilkan Kode Script Berikut" style="margin: 0px; padding: 0px; width: 200px; font-size: 12px;" 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"><br /> </div><div class="alt2" style="border: 5px inset ; margin: 0px; padding: 6px;"><div style="display: none;"><br />Letakkan Teks Anda Disni

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


Keterangan :
1. Untuk tulisan Open dan Close bisa sobat ganti sesuai keinginan.
2. Width : 55px untuk lebar spoiler.
3. Font-size: 11px untuk besar tulisan pada kotak spoiler.
4. Tulisan Spoiler adalah judul, silahkan ganti sesuai keinginan sobat.

Artikel Terkait

Perbaikan JavaScript