Collapse (Disclosure)

Enables content to be either collapsed (hidden) or expanded (visible). It has two elements: a trigger/button and a section of content whose visibility is controlled by the trigger.

A collapse is often used as a foundation for building custom UIs that show and hide content, like togglable accordion panels.

Basic example

Collapses are built using the Collapse component, and with defined trigger and content parts.

The trigger will automatically open/close the content when clicked, and all elements will receive the appropriate aria-* related attributes like aria-expanded and aria-controls.

<div o-component="collapse">
    <button o-part="trigger">...</button>

    <div o-part="content">...</div>
</div>

Default open state

The collapse component accepts an opened prop, which, when used, makes the collapse' content visible by default.

<div o-component="collapse" o-data='{ "opened": true }'>
    <button o-part="trigger">...</button>

    <div o-part="content">...</div>
</div>

Component API

Anatomy

Name	Type	Parent	Ideal tag	Description
`collapse`	component	-	-	The component.
`trigger`	part	collapse	button	The element in charge of toggling the opened/closed state of the component.
`content`	part	collapse	-	The element for which the contents will be consequentially opened or closed.

Props

Collapse

Name	Default	Description
`opened`	false	`boolean` Determines the opened state of the component.

Public props

Collapse

Name	Description
`$opened: boolean`	Property that allows manuall control of the opened/closed state of the component.
`$open(): void`	Triggers the component's open action.
`$close(): void`	Triggers the component's close action.
`$toggle(): void`	Toggles the component's open/close actions.