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.

<body>
    <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.

#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 :)

6 September 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat