Cara Membuat Accordion Dengan jQuery UI

Tentunya kita sudah mengenal jQuery sebagai salah satu framework yang dapat membuat interaksi website kita lebih oke dan keren dengan programming yang lebih simple dibanding javascript biasa. Sangat sesuai dengan semboyannya yaitu write less do more. Untuk menambahkan fungsi jquery-ui ke dalam halaman web kita cara yang biasa kita lakukan adalah menambahkan kode baris berikut

yaitu mengincludekan file jQuerynya. Pada pembelajaran kali ini kita akan membuat efek menu Accordion dimana Accordion ini merupakan teknik yang ada pada JQuery UI yang digunakan untuk mengelompokan kontent-kontent pada website berdasarkan kategori yang ada yang memebuat website temen temen akan lebih terstruktur. Contoh sederhana seperti ini

Pertama kita akan membuat dulu 3 list untuk menu yang akan kita rancang.

Selanjutnya untuk membuat efek accordionnya berikut syntax JQuerynya

Secara default, panel yang terbuka active adalah yang pertama. Kita bisa menentukan panel mana yang aktif saat pertama kali muncul dengan menambahkan active pada accordion. Penomoran panel dimulai dari 0 misalnya saya ingin panel yang kedua dibuka berikan nilai dengan active:1. atau jika temen temen ingin semua panel tertutup berikan nilai active:false.

tambahkan option lagi yaitu collapsible. Jalankan coba klik dua kali pada salah satu panel.

Bagaimana simple dan mudah bukan dengan script yang relatif sedikit temen temen bisa menciptakan menu dropdown dengan menggunakan jQuery UI.
Selamat mencoba

27 September 2015

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