Accordion

Native HTML5 disclosure element. Zero JavaScript. The browser's built-in rendering engine handles open/close state, keyboard navigation, and accessibility.

Live Example

Is JavaScript required for this?

No. The browser's native C++ rendering engine handles the disclosure state. No event listeners, no aria toggling, no framework needed.

How does keyboard navigation work?

Enter or Space toggles the panel. Tab moves focus naturally between summaries. All handled natively.

Can multiple panels be open at once?

Yes. Each <details> element manages its own open state independently. Remove the open attribute to start collapsed.

<details open>
  <summary>Is JavaScript required?</summary>
  <div>
    <p>No. The browser handles disclosure state natively.</p>
  </div>
</details>

<details>
  <summary>How does keyboard navigation work?</summary>
  <div>
    <p>Enter or Space toggles the panel. Tab moves focus between summaries.</p>
  </div>
</details>

Markup Structure

Zero classes are needed on the <details> element. The framework styles native elements perfectly out of the box. The <summary> is the trigger — no extra classes needed anywhere.

<details>
  <summary>Section Title</summary>
  <div>
    <p>Panel content goes here.</p>
  </div>
</details>

Open by Default

This panel starts open

Add the boolean open attribute to <details> to start expanded.

<details open>
  <summary>This panel starts open</summary>
  <div>
    <p>Content visible on load.</p>
  </div>
</details>

Key Features

  • Zero JavaScript — browser disclosure state is handled natively in C++
  • Zero classes — Simply use <details> and it gets styled automatically
  • Keyboard navigation — Enter/Space to toggle, Tab between summaries
  • Screen reader support — <summary> is announced with expanded/collapsed state automatically
  • Multiple open panels — each <details> is independent
  • Open state via attribute — set or remove the boolean open attribute

Accessibility

  • The <summary> element has implicit role="button" — no ARIA needed
  • Expanded/collapsed state is exposed to assistive technology automatically
  • No aria-expanded, aria-controls, or hidden attributes required
  • Focus management is handled by the browser
  • Minimum 44×44px touch target maintained on mobile

Best Practices

  • Write clear, descriptive <summary> text — it is the only visible label
  • Wrap body content in a single <div> for consistent padding
  • Use open on the first panel if the content is critical on load
  • Avoid nesting accordions more than one level deep

Features

  • Semantic Structure - Built with native HTML5 elements for maximum reliability.
  • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
  • Fully Responsive - Scales perfectly from mobile to desktop screens.
  • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
  • Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Accordion component is designed for versatile implementation across modern web applications. Ideal scenarios include:

  • Dashboards & Admin Panels - Structured data presentation and interface control.
  • Content Management Systems - Organizing complex information hierarchies and media.
  • E-Commerce Platforms - Enhancing product discovery and user workflows.
  • Marketing Sites - Highlighting key product offerings cleanly and effectively.
  • SaaS Applications - Delivering native-feeling, responsive app experiences.