Membuat slide toggle dengan menggunakan jquery versi lambat

Kali ini Saya akan memberikan panduan untuk membuat efek sliding pada suatu elemen. Dengan menggunakan slide toggle ini Anda dapat membuka maupun menutup tampilan suatu elemen dengan cara mengkliknya. Untuk membuatnya disini Saya menggunakan jquery dan css. Nah, untuk menampilkannya Saya menggunakan html5.

Adapun maksud dari versi lambat disini adalah kecepatan untuk membuka dan menutup suatu elemen dengan cara mengklik link yang di maksud. Dalam versi lambat tampilan elemen akan muncul dan menutup secara perlahan bila di klik lagi pada link yang dimaksud. Anda bisa mencobanya dengan mengklik contoh yang Saya sertakan pada bagian bawah postingan ini.

Silahkan Anda mencoba untuk membuatnya sendiri. Untuk kode jquery nya seperti ini:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("#x").click(function(){
        $("#y").slideToggle("slow");
    });
});
</script>

Sedangkan untuk kode css nya seperti ini:

<style> 
#y, #x {
    padding: 3px;
    text-align: center;
    background-color: #f1f1f1;
    border: dashed 1px #ebebeb;
}

#y {
    padding: 21px;
    display: none;
}
</style>

Setelah digabungkan dengan menggunakan html5, hasil kodenya seperti ini:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("#x").click(function(){
        $("#y").slideToggle("slow");
    });
});
</script>
<style> 
#y, #x {
    padding: 3px;
    text-align: center;
    background-color: #f1f1f1;
    border: dashed 1px #ebebeb;
}

#y {
    padding: 21px;
    display: none;
}
</style>
</head>
<body>
<div id="x">Klik Disini</div>
<div id="y">Selamat Datang di w3codez</div>
</body>
</html>

Nanti hasilnya akan seperti ini:

Klik Disini

Selamat Datang di w3codez

Sekian, semoga bermanfaat. Mohon maaf bila ada kesalahan.

Pages

w3codez

adchoices