Cara membuat tombol Show/hide

Saatnya posting... kali ini saya 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 :

1. langsung saja lah...
2. gak usah lama-lama....
3. silahkan Copy kode di bawah ini 

<div><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Show" 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 = 'Tampilkan'; }" type="button"/>
</div>
<div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2">
<div style="display: none;">
Silahkan diisi apa saja di sini, yang memang dirasa perlu tuk disingkat
</div></div></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.

Selamat mencoba dan semoga sukses sobat......

Bagikan Artikel :

Sign up here with your email