Aether JS AetherJS

data-aether-allow-multiple

Bu nitelik, Accordion gruplarının davranışını değiştirir. Varsayılan olarak bir panel açıldığında diğerleri kapanırken, bu özellik sayesinde kullanıcı birden fazla paneli aynı anda açık tutabilir.


01 Kullanım

Bu bir "Varlık Niteliği"dir (Boolean). Sadece accordion-group olarak tanımlanmış kapsayıcı elemente eklenir.

 
 
 
index.html
<!-- Wrapper -->
<div 
    data-aether-ui="accordion-group"
    data-aether-allow-multiple
>

    <!-- Item 1 -->
    <div>
        <button data-aether-trigger="accordion" data-aether-target="brands">
            Brands
        </button>
        <div id="brands" data-aether-ui="accordion-panel">
            Nike, Adidas, Puma...
        </div>
    </div>

    <!-- Item 2 -->
    <div>
        <button data-aether-trigger="accordion" data-aether-target="sizes">
            Sizes
        </button>
        <div id="sizes" data-aether-ui="accordion-panel">
            S, M, L, XL...
        </div>
    </div>

</div>

02 Davranış Karşılaştırması

Standart akordeon ile çoklu akordeon arasındaki farklar aşağıdaki gibidir.

Mod Davranış Uygun Senaryo
Varsayılan Bir panel açılınca diğer tüm paneller otomatik kapanır. Sadece 1 panel açık kalabilir. SSS (FAQ) sayfaları, adım adım ilerleyen süreçler.
allow-multiple Paneller birbirinden bağımsız çalışır. Kullanıcı hepsini açabilir veya hepsini kapatabilir. E-ticaret filtreleri, Dashboard widgetları, Detaylı ayar menüleri.

03 Kombinasyon İpucu

Default Open ile Birlikte Kullanım

allow-multiple özelliği, data-aether-default-open ile harika çalışır.

Örneğin filtre menüsünde "Markalar" ve "Fiyat Aralığı" sekmelerinin sayfa yüklendiğinde aynı anda açık gelmesini istiyorsanız, grup elementine allow-multiple, her iki butona da default-open vermeniz yeterlidir.