Altta Jquery kodunu görebilirsiniz; Öncelikle hızlı bir gözgezdirin;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$(document).ready(function(){
$("a.buton").toggle(
/*Birinci Görev Başlangıcı*/
function(){
 $("div.icerik").slideUp(200);
 $("a.buton").removeClass("acik");
 $("a.buton").addClass("kapali");
 $(".baslik").css("color","#ffe500");
},
/*İkinci Görev Başlangıcı*/
function(){
 $("div.icerik").slideDown(200);
 $("a.buton").removeClass("kapali");
 $("a.buton").addClass("acik");
 $(".baslik").css("color","#FFF");
}
);
});

toggle() fonksiyonu kullanarak herhangi bir seçiciye “a,p,div” iki farklı durum atayabiliyoruz. Çalışması için atandığı seçicinin üzerine tıklamak yeterlidir. Bizim örneğimizde seçici “.buton” sınıf adına sahip bir <a> tagıdır. <a> etiketine ilk kez tıkladığımızda function() lardan birincisi aktif olacaktır, ikinci defa tıkladığımızda ise function() lardan ikincisi aktif olacaktır. toggle(fn1,fn2) yapısına sahiptir. burada function() bloklarının “,” ile ayrıldığına dikkat edin.

Çalışma dosyasının tamamını indirmek için buraya tıklayabilirsiniz.