Hazırladığımız siteye göre bazı alanların kullanıcı tıkladıktan sonra açılmasını ya da kapanmasını sağlamak isteyebiliriz. Buna toggle (göster, gizle) diyebiliriz. Demo ve daha ayrıntılı bilgi için yazarın sitesine gidebilirsiniz.

Açılır Kapanır – Gizle Göster Butonu Hazırlama

jQuery Collapse dosyasını indirelim  ve indirdiğimiz dosyayı sitemizin head kodları arasına ekleyelim.

<script src="/jquery.collapse.js"></script>

Listeyi Hazırlama

Aşağıdaki kodları ya da bu kodlara benzer bir yapı oluşturup sitemize ekleyelim. Amacımız meyveler butonuna tıklayıp aşağı doğru kayarak açılan alanda meyvelerin görünmesini sağlamak. Tabii ki meyvelere ikinci defa tıklandığında da meyveler alanının kayan bir şekilde kaybolmasını da amaçlıyoruz.

<div><h3>Meyveler</h3><ul><li>Elma</li><li>Armut</li><li>Kiraz</li></ul></div>

Kayan Alan Efektini Uygulatmak

Sayfamızda script etiketleri arasında aşağıdaki kodları ekleyerek istediğimiz efektin çalışmasını sağlayabiliriz.

<script>$(".demo").collapse({show: function(){this.animate({opacity: 'toggle', height: 'toggle'}, 300);},hide : function() {this.animate({opacity: 'toggle', height: 'toggle'}, 300);}});</script>