jquery toggle nasıl kullanılır?

jquery toggle nedir ? jquery togglq nasıl kullanılır ?

jQuery toggle özelliği tıklamalarımızı ve tıklamalarımızın sonrasında yapmak istediklerimizi kontrol edebileceğimiz bir jquery fonksiyonudur. İşlem yapmak istediğimiz eleman için iki farklı işlem belirlediğimizi düşünürsek, eleman üzerindeki birinci tıklamada belirlediğimiz birinci işlem, ikinci tıklamada belirlediğimiz ikinci işlem gerçekleşecektir.

Kullanım şekli;

$(".uzmanim").toggle();

şeklindedir. Örnek ile açıklamak gerekirse;

$(".goster").click(function(){
   $(".uzmanim").toggle(1000);
});

Örneğimizde "goster" isimli class' a tıklandığında "uzmanim" class'ına sahip elemanımız toggle fonksiyonu ile 1 saniye içinde gözecektir. "goster" isimli class'ımıza tekrar tıklanıldığında ise 1 saniye içinde kaybolacaktır.

toggle bir elemanın css özelliklerinden display özelliğinin kontrol edilebilmeside vardır. İşlem yapmak istediğimiz elemanın display özelliği block ise none, none ise block olarak değiştirilir. Yani eleman kapalı ise açılır açık ise kapatılır. Bu özelliğin kullanımı aşağıdaki gibidir. Bunun için show/hide komutlarını kullanabiliriz.

$(".uzmanim").toggle("show"); 

$(".uzmanim").toggle("hide");

toggle kullanım şekillerinden bir diğeri ise her tıklamaya denk gelen özelliğin çalıştırılmasıdır. Kullanım şekli aşağıdaki gibidir.

$(".uzmanim").toggle(
    function () {
        // birinci tıklamadaki işlemler
    },
    function () {

        // ikinci tıklamadaki işlemler
    },
    function () {

       // üçüncü tıklamadaki işlemler
     }
);

Her tıklama için bir function açıyoruz. Bu function larıda virgül(,) ile ayırmamız gerekiyor.

Bu kullanıma örnek olarak her tıklamada işlem yapmak istediğimiz katmanın arka plan rengini değiştirebileceğimiz bir fonksiyon bulunmaktadır.

$("#uzmanim").toggle(
	    function () {
	        $("#Ornek1").css("background", "#ff0000");
	    },
	    function () {
	        $("#Ornek2").css("background", "#00ff00");
	    },
	    function () {
	        $("#Ornek1").css("background", "#0000ff");
	    }
);