CSS is Awesome

Interactive component

Accordion

Zero-JS accordion built on native <details name="…">. The browser handles mutual exclusion — open one, siblings close automatically. No JavaScript, no hydration, no third-party Disclosure component.

0 KB JSBaseline 2024WCAG 2.2 keyboard-native

What is mutual exclusion?
Open one, the others close. Native HTML since 2024.
Do I need JavaScript?
No. The browser handles everything via the name attribute — this demo is the real cia.accordion output on real <details> elements.

Usage

The mixin is the primary API. Apply it to whatever selector you like — cia doesn’t care whether it’s a class, a bare tag, or an attribute selector.

// app.scss — mixin form
@use 'css-is-awesome' as cia;

.faq-item { @include cia.accordion; }

Pair with the opt-in utility class if you prefer to skip the Sass step:

<!-- index.html -->
<details name="faq" class="cia-accordion">
  <summary>What is mutual exclusion?</summary>
  <div>Open one, the others close. Native HTML since 2024.</div>
</details>
<details name="faq" class="cia-accordion">
  <summary>Do I need JavaScript?</summary>
  <div>No. The browser handles everything via the name attribute.</div>
</details>

The accordion reads tokens via var(): --border-default, --surface-default, --text-primary, --text-secondary, --interactive-hover, --radius-md, --space-3, --space-4, --duration-fast, --ease. Override any of these on :root or in your theme file to retheme without touching the mixin.

Theme