Membuat Spoiler (Show and Hide Code)

Pastinya anda sudah tahu kebiasaan saya dalam mem-post artikel, yupz... saya selalu tidak banyak basa-basi. Mari kita coba membahas tentang "Membuat Spoiler (Show and Hide Code)". Tutorial ini sering saya gunakan dalam menulis kode HTML/Javascript. Untuk mengetahui apa itu Spoiler silakan lihat contoh berikut:

JUDUL SPOILER

ISI SPOILER

Berikut ini ada tutorialnya :

Code

<div style="margin: 5px;"><div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"><b style="font-family: &quot;Courier New&quot;,Courier,monospace;"><span style="color: blue;">JUDUL SPOILER</span></b> </span></i><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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" value="Show" type="button"></div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;"><span style="font-family: &quot;Courier New&quot;,Courier,monospace;">ISI SPOILER</span></div></div></div>

Keterangan:

• Ganti tulisan berwarna biru dengan Judul Spoiler

• Ganti tulisan berwarna merah dengan Isi Spoiler (isi Spoiler tidak selalu berupa kode, anda juga dapat menyisipkan foto sebagai isi Spoiler)

Simple kan?! Selamat mencoba.

Baca juga artikel berikut ini :

Posted in: Code,HTML/Javascript,Tips dan Trik,Tutorial,Tutorial Blogging