Accordions

Display expandable sections with single or multiple open panels and predictable keyboard navigation.

Start with your first page. Shared ui* providers are registered by createAdmin. Examples belong inside a route template, not the root HTML document. The page and its optional controller load through Atrium’s lazy route registry.

Minimal example

<div class="accordion" x-data="uiAccordion(['details'])" x-id="['heading', 'panel']" @keydown="navigate">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" data-accordion-trigger :id="$id('heading')" :aria-controls="$id('panel')" :aria-expanded="isOpen('details')" :class="{ collapsed: !isOpen('details') }" @click="toggle('details')">Details</button>
    </h2>
    <div role="region" :id="$id('panel')" :aria-labelledby="$id('heading')" x-show="isOpen('details')" x-cloak>
      <div class="accordion-body">Your content.</div>
    </div>
  </div>
</div>

Settings and behavior

• The first argument is the list of enabled IDs. Unknown IDs are ignored.
• Pass { multiple: true } as the second argument to allow several open panels.
• toggle(id) changes state and isOpen(id) reads it.
• All panels start closed. Use x-init=“toggle(‘details’)” to open one initially.
• Mark headers data-accordion-trigger for ArrowUp, ArrowDown, Home, and End navigation.
• Native disabled headers are skipped.

Integration notes

Use theme tokens instead of fixed colors. Keep accessible labels on controls. Test with keyboard navigation, both themes, and a narrow RTL viewport.

Working reference

See the production example. Return to the component index.

Author

Laurent Declercq l.declercq@agon-innovation.ch

License

Unless otherwise stated all source code is licensed under LGPL 2.1 and has the following copyright:

© 2026, Agon Partners Innovation AG, All rights reserved.

The design material and the “Agon Ātrium” trademark is the property of their authors. Reuse of them without prior consent of their respective authors is strictly prohibited.

Version

Version: 20260921