Collapse

Stows content in collapsible panels to keep the focus on key information.

Basic Usage

Multiple panels open at once

Includes basic info such as team, milestones, and budget.

The component library is built on Web Components standards.

Iterates by version, running the engineering discipline checklist before each release.

Example

active controls the set of expanded panels (name values comma-separated); by default multiple panels can be open at the same time.

Accordion

Accordion mode

Only one panel can be open at a time.

Opening a new panel automatically collapses the previous one.

Clicking an already-open panel collapses it.

Example

All Collapsed

All collapsed by default

All panels are collapsed by default.

Click the header to expand.

Example

Events

Expansion state events

Content 1

Content 2

Currently open: a

Example

API

oas-collapse

Attribute	Description	Type	Default
accordion	Accordion mode; only one panel open at a time	boolean	—
active	Set of expanded panel name values (comma-separated)	string	—

Event	Description
oas-change	Expansion state change, detail: { active: string[] }

Name	Description
default	—

oas-collapse-item

Attribute	Description	Type	Default
header	Panel title	string	—
name	Unique identifier of the panel	—	—
open	Whether it is expanded (managed by the container)	—	—

Event	Description
oas-collapse-item-click	—

Name	Description
default	—