Berikut ini sekilas tentang tips sederhana memodifikasi, mempercantik tampilan Tombol Spoiler beserta halaman konten yang memuat isi Spoiler. Untuk merubah tampilan tombol spoiler ini kita hanya menyelipkan Class atau juga Id pada Javascript Spoiler Button, dan class atau id tesebut memuat CSS. Nah untuk sekilas hasil/demo spoiler yang sudah di custom bisa dilihat di bawah ini.

---

---

Perhatikan kode-kode dibawah ini, ini adalah kode-kode untuk spoiler seperti contoh/demo diatas.

<div style="text-align: center;"> /* Memposisikan letak tombol (left, center, right)*/
<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 = 'CLOSE COY !'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'OPEN KONTEN'; }" type="button" value="OPEN KONTEN" class='buttons'/></div>
<div class="konten">
<div style="display: none;" class='isi-spoiler'>Nah nanti isi kontennya disini Sobat</div>
</div>

<style>
/*SPOILER CUSTOM*/
.buttons{background:#555;border-radius:4px;border-radius:2px solid #ddd;box-shadow:0 0 0 1px #555;font:bold 14px Verdana;color:#ddd;padding:4px;
}
.buttons:hover{background:#b00;color:#fff;cursor:pointer;box-shadow:0 0 0 1px #555,0 0 5px #000
}
.konten{width:100%;margin:5px auto 0;
}
.isi-spoiler{width:auto;background:#999;border-radius:5px;border:2px solid #fff;box-shadow:0 0 0 1px #888,inset 0 0 0 1px #888;font:12px Verdana;color:#fff;padding:10px;
}
</style>

Sekian dulu, selamat mencoba dan semoga tips yang sederhana ini bis sedikit bermanfaat... !!!