Cara Membuat Tombol Hide dan Show

Disini kita akan bersama-sama belajar membuat Tombol Hide dan Show. Ya, sering kita jumpai tampilan Hide dan Show dalam sejumlah Web atau Blog, yang mana tombol ini berfungsi untuk menyembunyikan dan menampilkan Teks ataupun Gambar.

Sekarang coba kita masuk ke Blogger terlebih dahulu lalu pilih Tata Letak selanjutnya kita Tambah Gadget HTML.

Masukkan kode berikut :

<div>

<input value="Tampilkan" style="margin: 0px; padding:0px;width:auto;font-size:10px;" onclick="if(this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Sembunyikan&#39;; } else{ this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Tampilkan&#39;; }" type="button" /></div>
<div class="alt2">
<div style="display: none;">
<div style="background:#000000;text-align:left;padding:10px;color:#ffffff;">
Masukkan Teks atau Gambar Disini.
</div>
</div>
</div>

Seperti ini hasilnya :

Masukkan Teks atau Gambar Disini.

Selamat Mencoba

Baca Juga :