Trik Membuat Show / Hide di Blog

Tulisan ini aku buat karena tertarik dengan tombol hide dan show seperti yang ada di kaskus.. sudah telambat sekali... tetapi namanya belajar dan keingintahuan 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

<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>