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 

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});

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"
    }
});

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