Artikel ini adalah membahas materi tentang fungsi slide pada Jquery. Sebelumnya juga sudah dibahas mengenai fungsi slidedown pada jquery pada artikel sebelumnya. Kali ini adalah membahas tentang kebalikanya dari slidedown, yaitu slideup. Yap, kita akan mempelajari fungsi slideup pada tombol dengan jquery. SlideUp ini adalah fungsi jquery untuk membuat sebuah interaksi menutup konten dari bawah ke atas. Contoh yang sangat sering kita temui adalah bila ada sebuah tombol jika kita tekan maka akan muncul isi kontennya dari atas ke bawah. Saat kita tekan kembali, maka isi konten tersebut akan menutup dari bawah ke atas. Seperti itu kira-kira contohnya.

Jadi jika kalian menemukan website dengan contoh seperti itu kemungkinan besar menggunakan jquery slidedown dan slideup. Agar lebih mendalami lagi pemahaman tentang slideup kita coba langsung praktekan saja. Kalian bisa ikuti contoh code dibawah ini dengan menyalin dan simpan dengan format HTML.

slideup.html

Jika sudah disimpan, kalian bisa melihat hasilnya dengan membuka file tersebut melalui browser kesayangan kalian. Jika berhasil maka tampilanya akan seperti ini.

ini adalah tampilan awal saat tombol belum ditekan. Kalian bisa coba untuk tekan tombol diatas dan lihat hasilnya.

Hasilnya adalah isi konten yang dibawah itu akan tertutup keatas dengan efek animasi slow motion sehingga membuat kesan menarik bagi pengunjung website.

Seperti itu kira-kira pengaplikasian fungsi slideup pada jquery. Kalian bisa modifikasi fungsi ini untuk kebutuhan website kalian agar disesuaikan dengan isi konten website.

Oke sekian pembahasan mengenai fungsi slideup pada tombol dengan jquery. Semoga artikel kali ini bermanfaat dan dapat membantu kalian dalam mengasah kemampuan tentang website khususnya untuk bidang front-end developer. Sampai jumpa pada artikel selanjutnya yang tidak kalah seru dan menarik untuk dipelajari.