Cara Membuat Tombol Show / Hide (Spoiler)

kali ini gue akan membahas tentang cara membuat tombol hide-show atau juga lebih dikenal dengan istilah spoiler. manfaat dari tombol hide-show atau spoiler ini adalah untuk menyingkat suatu tampilan fitur atau objek lain. misalnya kalian punya artikel atau widget yang panjang pasti akan banyak memakan tempat bukan?? dan di lihat juga kurang sedap.. hehe.. untuk lebih jelasnya kalian bisa lihat contohnya di bawah ini :

Silahkan Isi Apa Saja Yang Dirasa Perlu Di Singkat

langsung saja lah… gak usah lama-lama…
silahkan Copy kode di bawah ini:

<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;">
<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 = 'Tutorial'; this.value = 'Tampilkan'; }" style="margin: 0px; padding: 0px; width: 95px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 0px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Silahkan Isi Apa Saja Yang Dirasa Perlu Di Singkat</div>
</div>

  Ket: -.Biru: Silahkan anda ganti dengan kata-kata yang anda inginkan misal: Munculkan, atau show! -.Orange: Anda bisa menggantinya dengan kata yang anda inginkan, misal: Hide, atau hilangkan! -.Hijau: Silahkan disisipi dengan teks atau kode yang memang perlu disingkat.

Mungkin Sekian Tutorial Dari gue.

Thanks

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati