jQuery ile Göster/Gizle Efektleri

Değerli arkadaşlar, popüler bir JavaScript kütüphanesi olan jQuery ile isediğimiz bir nesneye Gizleme ve Gösterme fonksiyonlarını nasıl uygulayacağımıza dair örnek ve kodları yazıda yer almıştır. İyi Çalışmalar…

UYGULAMA ÖRNEĞİ;

jQuery ile Göster/Gizle Efektleri

Kodsepeti.

Yazılım Arkadaşlığı.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery  ile Göster/Gizle Efektleri</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
    p{
         padding: 20px;
        
       
    }
</style>
<script>
$(document).ready(function(){
    // Burda Gizle fonksiyonu çalışmaktadır.
    $(".hide-btn").click(function(){
        $("p").hide();
    });
    
    // Burda Göster fonksiyonu çalışmaktadır.
    $(".show-btn").click(function(){
        $("p").show();
    });
});
</script>
</head>
<body>
    <button type="button" class="hide-btn">Paragrafları Gizle</button> 
    <button type="button" class="show-btn">Paragrafları Göster</button>
    <p>Kodsepeti.</p>
    <p>Yazılım Arkadaşlığı.</p>
</body>
</html>         

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir