Membuat Tombol Show dan Hide

Berikut cara membuat nya :
Tinggal Copy Aja Codenya di bawah pastekan dalam postingan sobat pada tulisan atau gambar yang ingin di sembunyikan,ini codenya;






<div><div style="margin-bottom: 2px;"><b><small>Klik show untuk melihat</small></b>
<input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 14px;" 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 style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">
Masukkan tulisan yang hendak di sembunyikan di sini
</div></div></div>
Hasil nya seperti ini:

Klik show untuk melihat

Masukan tulisan yang hendak disembunyikan disini

Ket; width: 60px :adalah lebar tombol  Show/hide
border: 1px : Untuk menampilkan garis pinggir seperti di atas,jika tidak ingin menampilkan garis pinggir rubah saja menjadi  border: 0px ,maka akan seperti dibawah:

Klik show untuk melihat

Masukan tulisan yang hendak disembunyikan disini

Anda sedang membaca artikel tentang Membuat Tombol Show dan Hide dan Anda bisa menemukan artikel Membuat Tombol Show dan Hide ini dengan url http://dyenps-cabangsipon.blogspot.com/2012/07/membuat-tombol-show-dan-hide.html sobat boleh menyebarluaskannya atau mengcopy paste-nya jika artikel Membuat Tombol Show dan Hide ini bermanfaat bagi Anda,namun jangan lupa untuk meletakkan link ini sebagai sumbernya:<a href="http://dyenps-cabangsipon.blogspot.com/2012/07/membuat-tombol-show-dan-hide.html">Membuat Tombol Show dan Hide</a>

Artikel Terkait:

Posted in: Tutorial Blogger