Membuat "Show or Hide" Tulisan, Link, Gambar

Postingan Kali ini saya akan berbagi trik lama, mengenai Hide dan Show suatu gambar, tulisan, maupun link/script. Ini dapat membantu kita, para Blogger dalam mempercantik postingan. seperti contoh postingan saya pada kode-kode warna. Mari kita mulai saja dengan contoh seperti tombol dibawah ini:

Disini adalah kalimat atau gambar yang akan muncul di kotak hide dan show nantinya
Nah kode yang kita pakai disini adalah:

Nah kode yang kita pakai disini adalah:

<div>
<div style="margin: 0px;">
<div class="smallfont" style="margin-bottom: 20px;">
<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:#FFFFFF; text-align: left; padding:0px; ">


Disini adalah kalimat atau gambar yang akan muncul di kotak hide dan
show nantinya


</div>
</div>
</div>
</div>
</div>

Yang dapat anda ubah adalah yang berwarna merah, yaitu:

• seluruh text SHOW, baik yang pertama dan kedua. Ini merupakan tulisan yang tertera pada button saat Anda ingin menampilkan tulisan, gambar, link/script yang tersembunyi.
• text HIDE'. Ini merupakan tulisan pada button jika Ingin menyembunyikan tulisan, gambar, link/script.
• <div class="smallfont" style="margin-bottom: 20px;"> angka 20 diganti dengan keinginan Anda berapa pixel jarak antara button dengan tulisan, gambar, link/script.
• style="margin: 0px; padding: 0px; width: auto; font-size: 10px;. Angka 10 dapat Anda ganti berapa besar font pada button nantinya.
• <div style="background:#FFFFFF; text-align: left; padding:0px; ">. Yang berwarna merah merupakan warna background tulisan, gambar, link/script. Kode-kode warna dapat Anda lihat disini.

Show dan Hide ini dapat anda pergunakan baik dalam postingan, maupun dalam Widget/gadget.
Itulah posting saya yang simpel ini, semoga dapat membantu Anda.. ^^
Terima kasih sudah berkunjung...
Happy Blogging ^^...

sumber