Cara membuat slide toggle dengan menggunakan jquery versi cepat

Hampir sama dengan kedua postingan Saya sebelumnya. Kali ini Saya memberikan panduan untuk membuat slide toggle versi cepat. Untuk versi lambat Saya menggunakan kode 'slow', sedang 'middle' sedangkan kali ini Saya menggunakan versi cepat dengan kode 'fast' yang terdapat pada kode jquery nya. Untuk contohnya juga Saya sertakan pada bagian bawah postingan ini.

Silahkan Anda coba untuk mengkliknya dan silahkan Anda coba sendiri untuk membuatnya. Nah, 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("fast");
    });
});
</script>

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>

Kedua kode diatas 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("fast");
    });
});
</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>

Hasilnya akan seperti ini:

Klik Disini

Selamat Datang di w3codez

Sekian, semoga bermanfaat. Mohon maaf bila ada kesalahan.

Pages

w3codez

adchoices