Konfigurasi JQuery UI Accordion

Salah satu kemampuan JQuery UI yang cukup mengesankan adalah tentang begitu mudahnya kita membangun objek hanya dengan menerapkan fungsi pada elemen yang diinginkan. Di sini Saya akan menjelaskan sedikit (atau lumayan banyak?) mengenai JQuery UI Accordion.

---

Dasar Penggunaan

Sebelum menerapkan fungsi .accordion() pada elemen, pertama-tama Anda buat dulu kerangka objeknya yang secara umum diciptakan dari elemen-elemen berupa header, link dan divisi:

<div id='accordion'>
    <h3><a href='#'>Pemicu 1</a></h3>
    <div>
        ...
    </div>
    <h3><a href='#'>Pemicu 2</a></h3>
    <div>
        ...
    </div>
    <h3><a href='#'>Pemicu 3</a></h3>
    <div>
        ...
    </div>
</div> <!-- end accordion -->

Setelah itu Anda cukup menyeleksi elemen induknya saja kemudian terapkan fungsi .accordion() dan selesai sudah:

$(function() {
    $('#accordion').accordion();
});

Lihat Demo

---

Konfigurasi JQuery UI Accordion

Opsi	Nilai	Deskripsi
active	0, 1, 2, 3, ...	Menentukan panel urutan ke berapa yang akan terbuka saat pertama kali. Urutan pertama dimulai dari 0. (default: 0)
header	"h3"	Tentukan header akordion. Nilainya berupa selektor. (default: otomatis ditentukan oleh script. Elemen pertama akan menjadi header/pemicu dan elemen ke dua akan menjadi panel. Selebihnya akan disusun mengikuti pola tadi secara otomatis)
	"div.header"
fillSpace	true	Pilihan untuk mengatur tinggi akordion agar memenuhi ruangan secara vertikal. (default: false)
	false
icons	{header:"nama-ikon-1", headerSelected:"nama-ikon-2"}	Mengubah ikon default dari widget akordion. header digunakan untuk mengubah ikon pada pemicu dalam keadaan normal, headerSelected digunakan untuk megubah ikon pada pemicu yang sedang aktif. (default: header:"ui-icon-triangle-1-e", headerSelected:"ui-icon-triangle-1-s") Lihat semua nama ikon JQuery UI 1.8.16 »
autoHeight	true	Pilihan untuk menentukan apakah panel-panel akordion akan mengatur tinggi mereka sesuai dengan rata-rata ukuran tinggi terkecil dan ukuran tinggi terbesar atau membiarkan panel mengikuti ukuran konten yang ada di dalamnya. (default: true)
	false
event	"mouseover"	Menentukan bagaimana cara Anda membuka panel (default: click) Pelajari event-event dasar JQuery »

---

Contoh Penerapan

Membuka Panel ke Empat saat Awal Pertama Kunjungan

Urutan panel dimulai dari 0. Menentukan pembukaan panel ke empat sama artinya dengan menuliskan nilai active:3

$('#accordion').accordion({active:3});

Lihat Demo

Menciptakan Header dengan Elemen Lain

Header akordion tidak harus selalu dibuat dengan elemen <h3>. Header juga bisa dibuat dengan elemen lain. Misalnya seperti ini:

<div id='accordion'>
    <div class='header'><a href='#'>Pemicu 1</a></div>
    <div>
        ...
    </div>
    <div class='header'><a href='#'>Pemicu 2</a></div>
    <div>
        ...
    </div>
    <div class='header'><a href='#'>Pemicu 3</a></div>
    <div>
        ...
    </div>
</div> <!-- end accordion -->

$('#accordion').accordion({header:"div.header"});

Opsi ini sebenarnya tidak begitu penting dituliskan, karena script widget accordion sudah bisa menemukan sendiri elemen mana yang akan menjadi header/pemicu dan elemen mana yang akan menjadi panel.

fillSpace:true

Menentukan fillSpace:true akan membuat tinggi akordion menyesuaikan diri dengan tinggi elemen induk. Lebar akordion tidak disertakan ke dalam opsi karena tanpa JavaScript-pun semua elemen blok secara default akan melebarkan diri sesuai dengan lebar elemen induk:

$('#accordion').accordion({fillSpace:true});

Lihat Demo

autoHeight:false

Menentukan autoHeight:false akan membuat tinggi panel akordion menyesuaikan diri dengan konten yang ada di dalamnya. autoHeight:true akan membuat tinggi panel akordion menyesuaikan diri dengan tinggi rata-rata tiap panel akordion:

$('#accordion').accordion({autoHeight:false});

Opsi autoHeight pada UI Accordion

Lihat Demo

Modifikasi Ikon

Caranya sama persis dengan modifikasi ikon pada JQuery UI Button:

$('#accordion').accordion({
    icons: {
        header:"ui-icon-arrowthick-1-e",
        headerSelected:"ui-icon-arrowthick-1-s"
    }
});

Kustomisasi Ikon pada Pemicu Panel Akordion

Lihat Demo Lihat Daftar Ikon

Modifikasi Event

Misalnya, jika Anda menuliskan event:"mouseover" pada braket opsi, maka panel akordion akan terbuka berdasarkan aksi mouseover:

$('#accordion').accordion({event:"mouseover"});

Lihat Demo