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.
<body>
<div id="wrapper">
<button>Slide Toggle</button>
<div class="content">
<img src="logo.jpg">
<p>JAVA PROGRAMMER TEAM</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.
#wrapper {
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" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<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 :)