Tombol show dan hide

Tombol show dan hide ini merupakan tombol yang berfungsi untuk menyembunyikan dan menampilkan tulisan, gambar maupun gadget. Berikut ini adalah kode untuk membuat tombol show dan hide tersebut.

<div>
<div style="margin: 0px;">
<div class="smallfont" style="margin-bottom: 10px;">
<input value="SHOW1" style="margin: 0px; padding: 0px; width: auto; font-size: 12px;" 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 = 'SHOW2'; }" type="button"/>
</div>
<div class="alt2">
<div style="display: none;"><div style="background:#FFFFFF; text-align: left; padding:0px; ">

Disini adalah tulisan atau gambar yang akan muncul di kotak hide dan
show nantinya. Anda bisa ganti tulisan disini dengan gambar atau tulisan yang anda suka atau bisa juga anda ganti dengan kode gadget.

</div>
</div>
</div>
</div>
</div>
Contoh tampilannya :

Disini adalah tulisan atau gambar yang akan muncul di kotak hide dan
show nantinya. Anda bisa ganti tulisan disini dengan gambar atau tulisan yang anda suka atau bisa juga anda ganti dengan kode gadget.

Keterangan :
a.         SHOW1
Kata yang pertama kali muncul pada tombol dan jika diklik maka akan muncul sesuatu yang di sembunyikan.
b.        HIDE
Kata yang akan muncul ketika tombol SHOW1 atau SHOW2 telah diklik dan jika tombol HIDE diklik maka sesuatu yang muncul sebelumnya akan disembunyikan lagi.
c.         SHOW2
Kata yang akan muncul setelah tombol HIDE diklik dan jika tombol SHOW2 ini diklik maka akan memunculkan sesuatu yang sebelumnya telah disembunyikan.
d.        Kata SHOW1, SHOW2 dan HIDE bisa anda ganti dengan kata-kata yang lain
e.         margin-bottom: 10px
Angka 10 adalah jarak antara tombol dan sesuatu yang akan disembunyikan
f.         font-size: 12px;
Angka 12 adalah ukuran tulisan
g.        background:#FFFFFF;
Kode #FFFFFF adalah kode warna dibelakang sesuatu yang akan disembunyikan.

Tidak ada komentar:

Posting Komentar

Pages

Diterbitkan Oleh Angah Azhari