Cara Membuat Tombol Show/Hide

Kali ini saya mau sharing tutorial cara membuat tombol show/hide.Tombol show/hide itu adalah tombol yang saat diklik akan muncul tulisan atau gambar untuk menghemat tempat.Istilahnya men-minimize postingan (kira-kira begitu).
Daripada kita berlama-lama di sini,mendingan langsung simak aja!!!


Di bawah ini adalah kodenya.Tinggal di copy lalau diletakkan dimana aja (di postingan atau widget blog,jangan di tong sampah :-p)

<div><div style="margin: 5px;"><div class="smallfont" style="margin-bottom: 2px;"><input value="Show" style="margin: 0px; padding: 0px; width: auto; font-size: 10px;" 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'; }" type="button"/></div><div class="alt2"><div style="display: none;"><div style="border: 1px dotted #006400; text-align: justify;">teks atau gambar</div></div></div></div></div>

Ganti yang berwarna merah dan hijau sesuai keinginan.Berikut adalah contoh dari kode di atas.

Ahaa!!!!!!

Tutorial ini bersumber dari Aryo Humanika.