Accordion — Solid

Features

• APG disclosure pattern: each <button> is the sole child of an <h2>, with aria-expanded, aria-controls, and a labelled panel hidden from assistive technology when collapsed
• Two expand modes via data-mode: single closes siblings, multi toggles independently
• Layout-safe height animation using the CSS grid-template-rows 0fr to 1fr trick
• Editorial letterpress identity: solid plum-filled header block when open, 2px ink borders, offset press shadows, ruled-paper backdrop
• CSS-counter folio numerals (01, 02, ...) stamped on every header — pure CSS, no markup changes
• Chevron icon rotates 180 degrees on expand with a content fade and slide
• Keyboard navigation: Up/Down between headers, Home/End to jump, Enter/Space to toggle
• Responsive layout down to 320px with prefers-reduced-motion support

Accessibility

Disclosure pattern

Each header <button> is the sole child of an <h2> and controls a labelled role="region" panel

Collapsed panels

aria-hidden and inert apply immediately; hidden applies after the closing transition and is cancelled on reopen

Keyboard nav

ArrowUp/ArrowDown move focus, Home/End jump, Enter/Space toggle

Focus indicators

:focus-visible with --ring outline on all elements

Reduced motion

prefers-reduced-motion: reduce disables all animations

Viewport

100dvh for mobile-safe viewport height

Customise it with AI

Open Accordion — Solid in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the accordion is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.