data-aether-default-open

This attribute ensures that a component (Tab, Accordion) appears open/active by default when the page loads.

01 Usage

This is a "Boolean Attribute." It is typically added to Triggers. The system scans this tag upon initialization and automatically opens the associated target.

index.html

<!-- Wrapper -->
<div data-aether-ui="tab-group">

    <!-- Triggers -->
    <div class="flex space-x-4">
        <button data-aether-trigger="tab" data-aether-target="tab-1">
            Home
        </button>

        <button 
            data-aether-trigger="tab" 
            data-aether-target="tab-2"
            data-aether-default-open>
            Profile
        </button>
    </div>

    <!-- Panels -->
    <div id="tab-1" data-aether-ui="tab-panel">
        Home content...
    </div>

    <div id="tab-2" data-aether-ui="tab-panel">
        Profile content...
    </div>

</div>

02 Use Cases

Details on how it behaves across different UI patterns.

Component	Behavior
Tabs	The marked tab content is displayed, while others are hidden. If none are specified, the system usually opens the first tab automatically.
Accordion	The marked panel appears in its expanded state.

03 Smart Conflict Management

URL Hash vs. Default Open

If the syncUrl: true feature is active, AetherJS prioritizes the browser address bar.

For example; even if you have assigned default-open to the "Profile" tab in your code, if a user arrives via a site.com/#settings link, the system will open the "Settings" tab instead of "Profile." This ensures the best behavior for user experience.