Accordion

stable

Accordion organizes related content into sections that users can expand and collapse. Section titles remain visible so users can identify the available information and choose which sections to read.

The component uses progressive disclosure to reduce the amount of content shown at once. This can shorten a page and reduce scrolling, but it also makes the collapsed content easier to overlook.

What ages do you accept?

Programs are available for several age groups, depending on the specific offering.

What should children bring?

A water bottle
Weather-appropriate clothing
Closed-toe shoes

Do programs run in bad weather?

Programs generally continue outdoors unless conditions make participation unsafe.

Basic usage

By default, accordion items are independent, so multiple items can remain open at the same time.

Exclusive accordion

Give items the same name to allow only one item in the group to remain open.

Accordion props

Prop	Type	Default	Description
`class`	`string`	—	Adds a custom class to the accordion root.

AccordionItem props

Prop	Type	Default	Description
`title`	`string`	Required	The visible summary text.
`name`	`string`	—	Groups native details elements so only one can remain open.
`open`	`boolean`	`false`	Renders the item initially open.
`class`	`string`	—	Adds a custom class to the details element.

Behavior

The component uses native disclosure elements and requires no client-side JavaScript for opening, closing, or exclusive grouping.