Membuat show hide teks dan gambar

Tips Blog : Tips blog kali ini adalah Membuat show hide teks dan gambar, memang teknik show hide text dan gambar sudah banyak, namun tidak ada salahnya cerdaskom berbagi tips blog ini mengingat bisa saja rekan cerdaskom belum menerapkanya pada web atau blog rekan-rekan.

Show hide teks bermanfaat ketika kita ingin memasang informasi tertentu namun tidak terlalu dibutuhkan oleh pengunjung tetapi sangat kita butuhkan untuk melihat perkembagan blog kita misalnya saja Histats, sitemeter, backlink, dll tergantung kebutuhan juga sih!

Script yang akan cerdaskom bagikan disini dalam 2 format, cara memasangnya cukup mudah tinggal klik saja add gadget lalu pilih HTML/Java Script:

Script pertama adalah Show / Hide


<div><div style="margin: 20px; margin-top:5px"><div style="margin-bottom: 2px;" class="smallfont"><input style="margin: 0px; padding: 5px; width: auto; " value="Show" 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 = 'Hidden'; }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="border: none; color:none; background-color:none; text-align: justify; padding:10px;">
Letakkan disini yang ingin di sembunyikan</div></div></div></div></div>


Script kedua adalah :Tampilkan dan sembunyikan


<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 text atau gambar disini yang ingin dihilangkan
</div></div></div>


Keterangan :
Pada tulisan berwarna merah silahkan isikan dengan text atau gambar yang ingin dihilangkan