Accordion — Single Mode

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
• Code-fold interaction: a chevron caret rotates 90 degrees on expand, collapsed rows hint the folded body with a bordered ⋯ badge and closing brace
• Code-editor identity: title bar with window dots and breadcrumb, active faq.json tab, mono line-number gutter with divider, JSON syntax palette (key, string, comment, punctuation), blinking caret, azure status bar
• Editor line-highlight on hover and a region tint plus gutter rail on the open item
• 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

Decorative chrome

Title bar, comment line, status bar, fold hints, and caret are aria-hidden

Accessible names

Header buttons carry aria-label with the plain question text

Reduced motion

prefers-reduced-motion: reduce disables all animations

Viewport

100dvh for mobile-safe viewport height

Customise it with AI

Open Accordion — Single Mode 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.