Accordion - Canvas Design System

When to Use

Use Accordion when: Presenting FAQs, step-by-step instructions, or long lists of content that users need to scan quickly. Accordions reduce page length while keeping all information accessible.

Don't use when: All content should be visible at once (e.g. a short form). If there are only 2 items, consider showing them inline. For navigation, use Tabs instead.

Default

What is Workshopr? expand_more

Workshopr is a platform for workshop facilitators featuring a content library and AI Facilitation Coach.

How does the AI Coach work? expand_more

Is there a free plan? expand_more

<?= ws_accordion([
    ['title' => 'Question 1', 'content' => 'Answer 1', 'open' => true],
    ['title' => 'Question 2', 'content' => 'Answer 2'],
]) ?>

Bordered Variant

Getting Started expand_more

Planning a Workshop expand_more

Running a Session expand_more

<?= ws_accordion($items, ['variant' => 'bordered']) ?>

Allow Multiple Open

By default, opening a panel closes others. Set multiple: true to allow several panels open at once.

Panel One expand_more

This accordion allows multiple panels to be open simultaneously.

Panel Two expand_more

Click to open without closing the other panels.

Panel Three expand_more

<?= ws_accordion($items, ['multiple' => true]) ?>

With Icons

Each item can have an optional Material icon to add visual context.

Design Sprint expand_more

Retrospective expand_more

<?= ws_accordion([
    ['title' => 'Design Sprint', 'content' => '...', 'icon' => 'design_services'],
    ['title' => 'Retrospective', 'content' => '...', 'icon' => 'history'],
], ['variant' => 'bordered']) ?>

Parameters

Accordion Options

Parameter	Type	Default	Description
`id`	string	auto-generated	Container element ID
`variant`	string	`default`	`default` \| `bordered` \| `flush`
`size`	string	`md`	`sm` \| `md` \| `lg`
`multiple`	bool	`false`	Allow multiple panels open at once
`class`	string	`''`	Additional CSS classes

Item Options

Parameter	Type	Default	Description
`title`	string	—	Panel heading text
`content`	string	—	Panel body HTML
`open`	bool	`false`	Initially expanded
`icon`	string	`null`	Material icon name
`disabled`	bool	`false`	Prevent interaction

Anatomy

.ws-accordion — Outer container

.ws-accordion__item — Individual panel wrapper

.ws-accordion__trigger — Clickable header button

.ws-accordion__icon — Optional leading icon

.ws-accordion__title — Heading text

.ws-accordion__arrow — Expand/collapse chevron

.ws-accordion__panel — Collapsible content region

CSS Classes

Class	Purpose
`.ws-accordion`	Base accordion styles
`.ws-accordion--default`	Default variant
`.ws-accordion--bordered`	Bordered variant with card-style panels
`.ws-accordion--flush`	Flush variant (no borders)
`.ws-accordion--sm / --md / --lg`	Size modifiers
`.ws-accordion__item.is-open`	Open/expanded state
`.ws-accordion__item.is-disabled`	Disabled state

Accessibility

The accordion follows the WAI-ARIA Accordion pattern.

ARIA Attributes

Element	Attribute	Value
`.ws-accordion__trigger`	`role`	`button` (implicit if `<button>`)
`.ws-accordion__trigger`	`aria-expanded`	`true` (open) \| `false` (collapsed)
`.ws-accordion__trigger`	`aria-controls`	ID of the associated panel region
`.ws-accordion__trigger`	`aria-disabled`	`true` when item is disabled
`.ws-accordion__panel`	`role`	`region`
`.ws-accordion__panel`	`aria-labelledby`	ID of the associated trigger button

Keyboard Navigation

Key	Behavior
`Enter` / `Space`	Toggles the focused accordion panel open or closed
`Tab`	Moves focus to the next focusable element (next trigger or panel content)
`↑` / `↓`	Moves focus between accordion triggers (when focus is on a trigger)
`Home`	Moves focus to the first accordion trigger
`End`	Moves focus to the last accordion trigger

Implementation Notes

Do: Use <button> elements for triggers so they're focusable and activatable by default. The aria-expanded attribute updates dynamically as panels open and close. Heading elements wrapping triggers should match the page outline level.

Don't: Don't remove collapsed panels from the DOM — use hidden or CSS to hide them. Animated expand/collapse should not rely on display: none toggling, which can interrupt screen reader announcements mid-transition.

Files

File	Purpose
`includes/components/helpers.php`	`ws_accordion()` helper function
`includes/components/accordion.php`	Accordion template
`includes/components/components.css`	Accordion CSS (`.ws-accordion` rules)
`includes/components/components.js`	`wsAccordionInit()` toggle logic