Halo Dumenity, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya pada pembahasan tips dan trik seputar dunia website, pada artikel kali ini saya ingin memberikan tips cara Membuat Accordion Collapse Content Dengan jQuery UI dimana pada latihan kali ini kita akan menggunakan accourdion metode Collapse Content dimana pada accourdion ini nantinya akan menghasilkan accourdion bisa menutup konten. Secara default accourdion tidak bisa full menutup isi, ketika di buka pada salah satu accourdion maka secara bergantian akan menutup kontent sebelumnya.

Berbeda dengan metode ini, semua accourdion akan bisa di tutup semua sehingga menghasilkan layout yang lebih simple dan dinamis. Langsung saja kita implementasikan Membuat Accordion Collapse Content Dengan jQuery UI pertama – tama load terlebih dahulu jQuery dan jQuery UI nya

Kemudian kita buat list kontennya, disini saya membuat list sebuah paket kursus Dumet School

Teman – teman bebas membuat list apa saja, kemudian kita tambahkan css nya

Jika sudah berikan script jQuery UI nya untuk mengaktifkan accourdion

Letakkan tepat di bawah link jQuery UI nya

Membuat Accordion Collapse Content Dengan jQuery UI

Jika sudah save dengan nama index.html dan jalankan pada browsernya, maka akan tampil seperti gambar di bawah ini

Membuat Accordion Collapse Content Dengan jQuery UI

Metode Collapse Content ini secara defalut semua list accourdion tertutup, kita bisa membuka dan menutupnya sesuka hati

Membuat Accordion Collapse Content Dengan jQuery UI

Demikianlah cara Membuat Accordion Collapse Content Dengan jQuery UI teman – teman bisa menambahkan fitur ini pada project websitenya supaya website lebih interaktif. Baik sekian dari saya, kita jumpa kembali pada artikel yang akan datang. Terimakasih dan sampai jumpa. 😉