jQuery toggle()

jQuery toggle() özelliği ile tıklamalarımızı ve tıklamalarımızın sonrasında yapmak istediklerimizi kontrol edebiliriz. İşlem yapmak istediğimiz eleman için 2 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. Üçüncü tıklamada ise başa dönerek belirlediğimiz birinci işlem, dördüncü tıklamada belirlediğimiz ikinci işlem gerçekleşecektir. Bu süreç bu şekilde devam edecektir. Eğer 3 işlem belirlemiş olsaydık dördüncü tıklamada başa dönerek belirlediğimiz birinci işlem yapılacaktır.

Kullanım şekli aşağıdaki gibidir.

1	$("hedef eleman").toggle();

toggle ile yapabileceklerimiz arasında örneğin 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ı kullanıyoruz.

1	$("hedef eleman").toggle("show");

yada

1	$("hedef eleman").toggle("hide");

Bu kullanıma ek olarak eğer işlem yapmak istediğimiz eleman açık ve kapatmak istiyorsak yada eleman kapalı ve açmak istiyorsak, işlemde tek tıklama ile gerçekleştirilsin diyorsak true/false komutlarını kullanıyoruz. Bu şekilde eleman üzerinde tek tıklamaya izin veriyoruz. Bu kullanımda başa dönme olmaz. 

1	$("hedef eleman").toggle(true);

yada

1	$("hedef eleman").toggle(false);

toggle kullanım şekillerinden bir diğeride yukarıda açıkladığımız gibi her tıklamaya denk gelen özelliğin çalıştırılmasıdır. Kullanım şekli aşağıdaki gibidir.

$("hedef eleman").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ırıyoruz.

Bu kullanıma örnek olarak her tıklamada işlem yapmak istediğimiz katmanın fon rengini değiştirebileceğimiz bir fonksiyon hazırlayalım.

$("#ColorChange").toggle(   function () {          $("#Ornek2Div").css("background", "#ff0000");    },    function () {         $("#Ornek2Div").css("background", "#0004be");       },    function () {          $("#Ornek2Div").css("background", "#00be09");    } );

Alıntı : Tuncay Demirer