Membuat effect Accordion dengan jquery sebenarnya cukup mudah, sesuai dengan slogannya “write less do more” anda bisa membuat effect Accordion hanya dengan beberapa baris kode.
1. Browse ke jqueryui.com, sesuaikan theme anda(custom theme) ,download, dan extract seluruhnya.
2. load jquery, dan css yang telah anda sesuaikan sebelumnya,
3. init jquery accodion seperti ini
Jquery Accordion
fungsi dasar untuk membuat accordion dari jquery adalah $(id).accordion(), dalam hal ini contohnya qwertyuiop(jangan lupa tambahkan tanda pagar # di depan id untuk memberitahukan kepada jquery bahwa ini adalah id), untuk merubah effect pada saat accordion di klik anda dapat menambahkan opsi ” animated: ‘bounceslide’ ” atau ‘slide’ sebagai defaultnya,Sedangkan untuk merubah icon accordion cukup tambahkan opsi ” icons: {‘header’ : ‘nama-icon-pada-saat-inactive’, ‘headerSelected’ : ‘nama-icon-pada-saat-active’} ” daftar nama-icon-pada-saat-inactive/active dapat anda lihat pada saat anda membuat custom theme di website jqueryui.
4. buat div yang akan di pakai effect accordion
jquery accordion
Selesai sudah, cukup 4 langkah untuk membuat effect accordion menggunakan jqueryui
Jqueryui Accordion
gadgetgaia's Blog 