Accordion Menu

Features

• Stacked collapsible sections, each a disclosure button with aria-expanded and aria-controls
• Smooth unfold via a grid-template-rows reveal — no layout properties are transitioned, with direction-aware timing (0.3s open, brisk 0.25s collapse) and a soft cross-blur as entries appear
• Chevron flips vertically (scaleY) from a "v" to a "^" on open, passing through a flat line at the midpoint, with vector-effect: non-scaling-stroke keeping the stroke constant mid-flip
• Open section draws a gilt rule under its head, left to right, via transform: scaleX
• Typewritten folio index (01 / 02 / 03) per section head, gilt while its section is open
• Roman-numeral entry count (IV, III) per section, computed from the data at render
• Ledger rows: serif label, dotted leader, tabular Courier amount — debits set in accountant's parentheses
• Engraved double-rule card frame: hairline border plus an inset second hairline
• Single-open accordion mode driven by an ACM_CONFIG flag, multi-open when disabled
• Current page link tracked with aria-current="page", its label gilt and its amount inked
• Springy press feedback on section heads via transform: scale(0.97)
• Full keyboard navigation: arrows move, Right opens or enters a section, Left closes or exits
• Data-driven sections and entries rendered from ACM_GROUPS in js/data.js
• Fully respects prefers-reduced-motion

Accessibility

Disclosure buttons

Each section head uses aria-expanded and aria-controls pointing at its panel

Panel semantics

Panels use role="region" with aria-labelledby back to their head

Current page

The active entry carries aria-current="page"

Hidden panels

Closed panels are visibility: hidden, removing entries from the tab order

Decorative figures

Folio indexes, roman counts, leaders and amounts are aria-hidden — labels carry the name

Keyboard support

Arrows rove, Right opens/enters, Left exits/closes, Home/End jump

Focus indicators

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

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Accordion Menu in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the dropdown menu 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.