Turkcell | Geleceği Yazanlar

302: JQueryBaşlangıç seviyesi derslerde Web Programlama uygulama geliştirme ortamını detaylı olarak inceliyoruz.

Tüm Eğitimleri Aldın mı? Kendini sınamanın tam zamanı

Haydi Sınava Gir

jQuery toggle() Fonksiyonu

Kategori : Mobil | Lisans : Creative Commons (by-nc-sa) | En son 12.09.2019 tarihinde güncellendi
Eğitmen : Geleceği Yazanlar Ekibi
Etiketler : web-programlama

jQuery ile toggle() metodunu kullanarak, hide() ve show() metotları arasında geçişler sağlayabilirsiniz; böylece seçilen eleman bir görüntülenir bir gizlenir ve bu geçişler devam eder.

Örneğimizi hep birlikte inceleyelim:

$("button").click(function(){
  $("p").toggle();
});

 

Yazılış biçimi

$(seçici).toggle(hız,geriçağır);

Parametrelerin anlamı ve işlevi yukarıda açıklandığı gibidir.

Toggle fonksiyonuna örnek HTML5 kodunu aşağıda inceleyebilirsiniz:

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                              $("button").click(function(){
                                                $("p").toggle();
                                                });
                              });
            </script>
    </head>
    <body>
        
        <button>GIDIS-GELISLER</button>
        <p>Geleceği Yazanlar yazısı</p>
        <p>Her düğmeye basıldığında gelip gider</p>
    </body>
</html>

GİDİŞ-GELİŞLER düğmesine tıklayınca iki satır silinecek, tekrar tıklayınca geri gelecektir.