Membuat slide toggle dengan menggunakan jquery kecepatan sedang

Membuat slide toggle dengan menggunakan jquery. Nah, untuk kali ini dengan menggunakan kecepatan sedang dalam menampilkan maupun menutup atau menyembunyikan suatu elemen. Saya juga menyertakan contoh tampilannya pada bagian bawah postingan ini. Perbedaan dengan yang versi lambat hanya pada kode jquery nya saja.

Kalau yang lambat menggunakan kode 'slow' sedangkan yang sedang menggunakan kode 'middle'. Silahkan Anda coba untuk membuatnya sendiri. Berikut ini kode jquery nya:

<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("middle");
    });
});
</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>

Penggabungan kedua kode di atas dalam html 5 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("middle");
    });
});
</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. Terima kasih atas kunjungannya.

Pages

w3codez

adchoices