data-aether-allow-multiple

This attribute modifies the behavior of Accordion groups. While by default opening one panel closes the others, this feature allows the user to keep multiple panels open simultaneously.

01 Usage

This is a "Presence Attribute" (Boolean). It is added only to the container element defined as an accordion-group.

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 Behavior Comparison

The differences between a standard accordion and a multiple accordion are as follows.

Mode	Behavior	Suitable Scenario
Default	When one panel opens, all other panels automatically close. Only 1 panel can remain open.	FAQ pages, step-by-step processes.
allow-multiple	Panels operate independently. The user can open all of them or close all of them.	E-commerce filters, Dashboard widgets, detailed setting menus.

03 Combination Tip

Usage with Default Open

The allow-multiple feature works perfectly with data-aether-default-open.

For example, if you want "Brands" and "Price Range" tabs in a filter menu to be open simultaneously when the page loads, simply add allow-multiple to the group element and default-open to both buttons.