Cara Membuat Efek Slide Toggle dengan jQuery
Cara Membuat Efek Slide Toggle dengan jQuery - Didalam jQuery banyak sekali fungsi efek yang dapat kita manfaatkan untuk menambah atau membuat suatu efek terhadapa objek atau elemen. Contoh efek pada jQuery adalah slide up, slide down, show, hide, slide toggle dan masih banyak lagi efek yang lainnya. Pada kesempatan kali ini saya akan berikan contoh dan tutorial salah satu efek yang terdapat pada jQuery yaitu slide toggle. Nah, berikut ini akan saya praktekan bagaimana Cara Membuat Efek Slide Toggle dengan jQuery.
Langkah 1 : Cara Membuat Efek Slide Toggle dengan jQuery
Langkah pertama untuk membuat efek slide, kita akan tentukan dulu objek yang akan dikenai efek, dalam kasus ini kita akan menambahkan efek slide pada objek gambar dengan trigger klik pada tombol button, untuk itu silahkan buat struktur HTML sederhana seperti berikut ini.
<div id="wrapper">
<button>Slide Toggle</button>
<div class="content">
<img src="logo.jpg">
<p>DUMET School tempat kursus web terbaik di jakarta</p>
</div>
</div>
</body>
Langkah 2 : Cara Membuat Efek Slide Toggle dengan jQuery
Langkah berikutnya sebelum menambahkan fungsi efek slide toggle, kita akan desain terlebih dahulu objek dan elemen button agar terlihat lebih rapih. Silahkan ketikan sintak CSS berikut.
width: 400px;
margin: auto;
padding: 10px;
}
img, button { width: 400px; }
button {
width: 400px;
padding: 10px;
margin-bottom: 10px;
background: #e5e3e4;
color: #0085c8;
border: 2px solid #0085c8;
border-radius: 10px 10px;
cursor: pointer;
font-weight: bold;
letter-spacing: 2px;
}
p {
background: #0085c8;
padding: 10px;
color: white;
margin-top: -4px;
}
Langkah 3 : Cara Membuat Efek Slide Toggle dengan jQuery
Selanjutnya, barulah kita akan buat fungsi slide togglenya dengan memanfaatkan script dari jQuery yaitu slide toggle, silahkan ketikan sintaknya berikut ini.
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function () {
$('.content').slideToggle({
duration: 350,
easing: 'swing'
});
});
})
</script>
Setelah semua sintak telah kalian ketikan, silahkan simpan filenya kemudian buka pada browser untuk melihat hasil akhirnya.
Baiklah, cukup sekian tutorial bagaimana Cara Membuat Efek Slide Toggle dengan jQuery, semoga tutorial ini bisa bermanfaat dan selamat mencoba :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
