jQuery "Show/Hide" Yapımı

Merhaba arkadaşlar, bugün jQuery'nin velinimetlerinden olan göster/gizle efektinin nasıl ve hangi alanlarda kullanabileceğinizi anlatacağım. Artık ufak ufak bunun gibi gerekli ve önemli jQuery yazılarım ile karşılaşabilirsiniz. Başlıyorum.

<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;">
  Bu bölüme yazmak istediklerinizi yazacaksınız.
</div>

DEMO

Hangi Alanlarda Kullanabilirim ?

• Blogunuzda ki kod paylaşımlarınızda.
• Spoiler yorumlar veya içeriklerinizde.
• Yazılarınız da bulunan uzun alıntılarda.

Ve çeşitli yerlerde kullanabilirsiniz. Umarım bu anlatımım işinize yarayacaktır. İyi bloglamalar.