UX Rocket Accordion

İçerikler görütülenirken hareketin geçişi CSS3 transition ile tanımlanmıştır. Eski tarayıcılarda efektsiz olarak çalışmaktadır.

<div class="collapsible">
    <h3 class="collapsible-header"></h3>
    <div class="collapsible-content"></div>
</div>
<div class="collapsible">
    <h3 class="collapsible-header"></h3>
    <div class="collapsible-content"></div>
</div>

Notlar

Aynı ebeveyn içindeki akordiyon elemanlar birbirleri ile etkileşimli olarak çalışırlar. Bir akordiyonun açık gelmesi için current classı eklenmesi yeterlidir.

Tanımlar

Property	Default	Açıklama
header	.collapsible-header	Akordiyonun açılma/kapanma aksiyonlarını tetikleyen başlık satırı
content	.collapsible-content	Akordiyonun içeriği. Metin, tablo, form, resim içerik kısıtlaması yoktur.
current	current	Aktif olan akordiyon elemanı için tanımlanan CSS classı.
closeSiblings	true	Akordiyon açıldığında, aynı ebeveyn içindeki diğer akordiyonların kapanması ya da açık kalmasını belirler. true değerinde, diğer akordiyonlar kapanır.
animateWith	css	css ya da js parametrelerini alır. Akordiyonlar açılıp/kapanırken animasyonun CSS ile mi yoksa JS ile mi olacağını belirler. JS durumunda slideUp/Down şeklinde çalışır. CSS durumunda ise CSS ile tanımlanmış şekilde çalışır.
duration	200	JS animate kullanırken, animasyon süresini belirler.

Callback
onReady	Akordiyon plugini elemanlara bağlandığında çalışacak fonksiyonu çağırır.
onOpen	Akordiyon elemanı açıldığında çalışacak fonksiyonu çağırır.
onClose	Akordiyon elemanı kapandığından çalışacak fonksiyonu çağırır.

Public Metodlar

Method	Açıklama
$(selector).collapsible(options)	Bu method plugini manuel olarak bir elemana bağlamanızı sağlar.
$.uxcollapsible	Bu method pluginin detayını görmenizi sağlar.
$.uxcollapsible.version	Sayfaya eklenmiş pluginin versiyon numarasını gösterir.
$.uxcollapsible.settings	Aktif pluginin ayarlarını gösterir.