Cara Membuat Efek Slide Toggle dengan jQuery

06/09/2018    Risman Hakim    103     Website

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

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More