Göster Gizle "Show/Hide" Yapımı ( jQuery)

jQuery Kod

Göster Gizle "Show/Hide" Yapımı ( jQuery)

mbahadir   Kasım 14, 2013   1 comment  

Blogger de istersek bir tuş fonksiyonuna bağlı gözüküp gizlenebilen mesaj yapabiliriz. Bunun için basit bir  jQuery  düzenledim. Yani blogger da gizle / göster kodunun Kullanımı ise şöyle :

<div id="showhide">

<div>

<input type="button" value="Göster / Gizle" style="margin:0px;padding:0px;" 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 = 'Gizle'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Göster'; }">

<div style="background: #f2f2f2; margin: 20px auto; border: 0px solid #BBB; padding: 0px;">

 <div style="display: none;"> GİZLENECEK RESİM, METİN, YAZI VEYA KOD  </div>

GİZLENECEK RESİM, METİN, YAZI VEYA KOD

*Blogunuzda göstermek istediğiniz yere Blogger Kullanıcı paneli > Yerleşim > Gadget ekle > HTML/JavaScript ekle yolunu izleyerek ekleyebilirsiniz.

* Paylaşımlarınızı yazdığınız panelde HTML kısmından ekleyerek tek bir sayfa içinde de kullanabilirsiniz.

Standart buton yapısı kullanılmıştır, isterseniz değiştirip temanıza uygun görsellikte buton kullanabilirsiniz.

LIVE DEMO

http://webseyyahi.blogspot.com/2013/11/goster-gizle-showhide-yapm-jquery.html