jQuery toggleClass() Metodu , bir nesneyi add/remove yapmamızı sağlar. Yani butonun iki özelliği olur ve ilk tıklamada kaybolurken ikinci tıklamada ise nesne geri gelir. Bunu bir dive tıklandığında kaybolması gibi düşünebilirsiniz.Ya da bir stil ataması olarak kullanabiliriz. Butona tıklandığında bir yazının rengini, divin özelliğini değiştirebileceğimiz gibi istersek yok edebiliriz de. Bir class tanımlaması yapıp bunu toggleClass ile çağırmamız yeterli.
İlk örnek basit anlamda olsun sadece kullanımı hakkında bilgi versin bize…
$("button").click(function(){
$("h1,p").toggleClass("blue"); // nesnelere blue adlı class 'ı atadık..
});
Yukarıda yer alan basit örnekten sonra kullanımına bir bakalım.Gerekli kütüphaneyi çağıralım ve html , jquery kodlarımızı kaynak dosyaya ekleyelim.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p,h3").toggleClass("sakla");
});
});
</script>
<style>
.sakla
{
display:none;
}
</style>
</head>
<body>
<p>Bu paragraf ve alltaki silinecek</p>
<h3>Bu yazı ve üstteki silinecek</h3>
<button>Tıkla</button>
</body>
</html>
Yukarıdaki basit uygulamada h3 ve p etiketlerine stil ataması yaptık. İlk tıklamada kayboldu ve ikinci tıklamada ise göründüler. İster renk uygulaması verebilir istersek de böyle bir kaybetme animasyonu uygulayabiliriz. jQuery ile basit bir uygulamayı daha bitirdik diyebiliriz.
