MEMBUAT TOMBOL HIDE DAN SHOW DI BLOGGER

Tulisan ini aku buat karena tertarik dengan tombol hide dan show seperti yang ada di kaskus.. udah telat sich... tetapi namanya belajar dan keinginantahuan sudah pasti tidak ada kata telat... betul...?

Tombol Hide dan show ini sangat berguna sekali untuk memangkas ruang halaman, terutama untuk penempatan gambar atau hal-hal yang spesifik lainnya.

Caranya pun cukup mudah... coba perhatikan tombol yang ada dibawah ini, kondisinya bila di klik maka akan tampil box halaman yang berisi kode cara pembuatan tombol hide dan show, dan bila di klik lagi, halaman tersebut akan disembunyikan lagi... cek it dot..

Caranya tinggal copy paste kode dibawah ke widget atau post.. cek it dot...

<div>
<div style="margin: 1px;">
<div class="smallfont" style="margin-bottom: 1px;">
<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="background:#808080; text-align: center; padding:10px; "> Disini adalah kalimat atau gambar yang akan muncul di box hide dan show
</div>
</div>
</div>
</div>
</div>