--- title: "Accordion" subtitle: "Expandable sections with single or multi-open modes" description: "How to use the accordion component for collapsible, grouped content." author: "Studio" section: "Design System" layer: "core" subsection: "Content" order: 5 status: "published" access: "team" client: "internal" --- Accordions group related content into collapsible sections. They support two modes: **single** (opening one panel closes the others) and **multi** (each panel toggles independently). The component requires JavaScript (`assets/js/accordion.js`). --- ## Basic usage Include the script on any page that uses accordions: ```html ``` The script auto-initialises all `.accordion` containers on DOMContentLoaded. No manual setup needed.

Colour, typography, and spacing primitives that define the visual identity.

Purpose-driven aliases that map brand primitives to interface roles.

Structural building blocks for page composition — sections, containers, blocks.

```html
Content goes here.
``` --- ## Structure The three-element panel structure exists because of how the CSS grid animation works: ``` .accordion-content → grid container (grid-template-rows: 0fr → 1fr) .accordion-inner → overflow clipper (overflow: hidden, min-height: 0) .accordion-body → consumer content and padding live here ``` **Why three elements?** The grid row collapses `.accordion-inner` to zero height, but padding on `.accordion-inner` itself would bleed through the `0fr` state and prevent full collapse. `.accordion-body` sits inside the clipping boundary, so its padding gets hidden when the panel is closed. **Rule:** Never put padding or margin on `.accordion-inner`. Always use `.accordion-body` for spacing. --- ## Modes ### Multi-open (default) Each panel toggles independently. Set `data-accordion="multi"` or omit the attribute entirely. ```html
``` ### Single-open Opening one panel closes all siblings. Set `data-accordion="single"`.

Opening this panel closes the others.

Only one panel can be open at a time.

Mutual exclusion keeps the interface focused.

```html
``` --- ## JavaScript ### Auto-initialisation The script initialises all `.accordion` containers automatically on DOMContentLoaded. No manual setup is required. ### Re-initialisation (SPA / Barba) For single-page apps or Barba transitions, call `initAccordion()` after new content is injected: ```js if (typeof window.initAccordion === "function") { window.initAccordion(); } ``` The function is safe to call multiple times — headers that are already bound are skipped via a `data-accordion-bound` guard. ### Scoping The component uses `:scope > .accordion-item` to select only direct-child items. This means nested accordions work correctly — each level manages its own items without interfering with inner or outer levels. --- ## Nested accordions Combine single-open and multi-open modes across nesting levels. The outer accordion controls top-level navigation while inner accordions allow independent exploration within each section.

Logo, colour palette, typography selection.

Tokens, components, layout primitives.

Front-end implementation, CMS integration, deployment.

```html
Content
``` --- ## Keyboard interactions | Key | Action | |-----|--------| | `Tab` | Move focus to the next focusable element (including accordion headers) | | `Enter` / `Space` | Toggle the focused panel open or closed | | `ArrowDown` | Move focus to the next header in the group (wraps to first) | | `ArrowUp` | Move focus to the previous header in the group (wraps to last) | | `Home` | Move focus to the first header in the group | | `End` | Move focus to the last header in the group | Arrow key navigation is scoped to each accordion level — nested accordions navigate independently. --- ## Accessibility notes - Each `.accordion-header` is a `