Turkcell | Geleceği Yazanlar

Web Programlama

Web Programlama

DERS PROGRAMI
302: JQuery Ders Programı

jQuery toggle() Fonksiyonu

Lisans: Creative Commos (by-nc-sa)12.09.2019 tarihinde güncellendi
Bakabileceğiniz Etiketler:Eğitmen: Geleceği Yazanlar Ekibi

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.