takien.github.iodon't cover a judge by its book
TutorialJavaScriptHTML

Cara Membuat Spoiler

Oleh takien• 15 Komentar Arsip

Menyembunyikan konten tertentu dari sebuah halaman website terkadang diperlukan untuk menghemat space. Ketika visitor ingin melihatnya mereka dapat dengan mudah menampilkannya. Dalam software forum semacam vBulletin, hal ini disebut dengan Spoiler.

Berikut adalah contoh penggunaan spoiler:

Ini adalah konten yang disembunyikan, klik tombol Sembunyikan/Tampilkan untuk membuka atau menutup konten ini.

Bagaimana cara membuatnya? Hanya diperlukan sedikit kode javascript yang langsung diembed di kode html.

<div>
<input style="margin:0px;padding:0px;" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button" value="Tampilkan" /></div>
<div style="border: 1px solid #000000; margin: 10px auto; padding: 5px; background: #c9d2ed none repeat scroll 0% 0%; width: 500px;">
<div style="display: none;">
Ini adalah konten yang disembunyikan, klik tombol Sembunyikan/Tampilkan untuk membuka atau menutup konten ini.</div>
</div>

Versi plugin WordPress

Di sini

Tulisan ini sudah berumur: 17 tahun 10 bulan 1 hari. Informasi di dalamnya mungkin sudah tidak relevan, tapi nilai historisnya sangat berharga, terutama bagi saya sebagai penulisnya.

(Dipulihkan dari indowebmasters.com)

Tag Terkait:

Komentar (15)

Arsip Statis
ripiyuku
udah nyoba boss … seeppppp
iBNuX
thx for sharing…
iBNuX
tapi klo multi spoiler ga jalan yang keduanya
takien
@ibnux, bisa, untuk multi spoiler cukup tambahkan div lagi di masing2 spoilernya… jadinya begini… spoiler 1 .... disini kode spoiler seperti contoh di atas spoiler 2 .... disini kode spoiler untuk contoh diatas... boleh dicoba
dago7
bikin yang kaya di kaskus douung
takien
tinggal ganti aja Tampilkan/Sembunyikan menjadi Show/Hide :-j
Misz
Bisa dipakai di WP ngga ya? Terus kalo bisa naruhnya di bagaian mana?
Cyber Search
ane coba di theme ane kok ngga bisa ya mas..apa themenya yang ngga support ya..?
takien
hmmmm… ntar ane cek lagi gan
Xrvel
udah saya cek gan. makasih gan.. bisa gan :p
takien
Hello all, sudah saya buatkan pluginnya untuk WordPress, tinggal upload instal. Cek link di atas. Thank you
Cyber Search
walah…mantaff..ijin sedot gan..pertamaxxx
Crist_erick
ijin sedot gan, thx
Anonymous
silahkan gan
Anonymous
work gan… bisa di wp ane