Skip to content

Accordion

Built on native <details> / <summary>. Three patterns: standalone, auto-close (JS), and native exclusive.

Standard details/summary

What is FAP CSS?

FAP CSS is a minimal classless-first CSS framework. It makes raw, unstyled HTML look great with zero class attributes.

What's the tech stack?

Lightning CSS (Rust compiler) + Bun (runner). One source file → two minified outputs.

How small is it?

The full framework is under 9 KB gzipped. The base bundle is about 3.2 KB gzipped.

<details>
  <summary>What is FAP CSS?</summary>
  <p>Content revealed when opened.</p>
</details>
<details open>
  <summary>Open by default</summary>
  <p>This section starts open.</p>
</details>

Auto-close accordion (data-accordion)

Only one section stays open at a time via fap.js.

Section One

When you open another section, this one closes automatically.

Section Two

Only one section is open at a time. Progressive enhancement — without JS, all sections stay independent.

Section Three

The [data-accordion] attribute on the parent div enables this behavior.

<div data-accordion>
  <details open>
    <summary>Section One</summary>
    <p>Content here.</p>
  </details>
  <details>
    <summary>Section Two</summary>
    <p>Only one open at a time.</p>
  </details>
  <details>
    <summary>Section Three</summary>
    <p>Requires fap.js for auto-close.</p>
  </details>
</div>

Native exclusive accordion (name attribute)

The name attribute groups details elements natively. Chrome 120+, Firefox 130+, Safari 17.2+.

Native Section One

Opening this automatically closes the others.

Native Section Two

No JavaScript needed — pure HTML.

Native Section Three

This is the native replacement for [data-accordion].

<details name="my-accordion">
  <summary>Section One</summary>
  <p>Content here.</p>
</details>
<details name="my-accordion">
  <summary>Section Two</summary>
  <p>Only one open at a time — no JS.</p>
</details>