Components
Collapsible
A button that toggles the visibility of a content section.
Usage
<button id="mct:collapsible:details" aria-expanded="false" aria-controls="mcc:collapsible:details">
Show more details
</button>
<div id="mcc:collapsible:details" aria-labelledby="mct:collapsible:details" aria-hidden="true" hidden="until-found">
This content is revealed when you click the trigger.
</div>Examples
Default Open
Set the collapsible to be expanded by default.
This content is visible by default. Click the trigger to collapse it.
<button id="mct:collapsible:open" aria-expanded="true" aria-controls="mcc:collapsible:open">
This section starts open
</button>
<div id="mcc:collapsible:open" aria-labelledby="mct:collapsible:open" aria-hidden="false">
This content is visible by default.
</div>Disconnected
The trigger and content don't need a Root container. Connect them by matching IDs and they can live anywhere in the DOM.
Toolbar
Content area
<!-- Trigger in one container -->
<div class="toolbar">
<button id="mct:collapsible:details" aria-expanded="false" aria-controls="mcc:collapsible:details">
Toggle details
</button>
</div>
<!-- Content in another container -->
<div class="content-area">
<div id="mcc:collapsible:details" aria-labelledby="mct:collapsible:details" aria-hidden="true" hidden="until-found">
This content lives elsewhere in the DOM.
</div>
</div>Accessibility
Follows the WAI-ARIA Disclosure Pattern.
Keyboard
| Key | Action |
|---|---|
Enter / Space | Toggle the content visibility |
Hidden content uses hidden="until-found" so it remains searchable via browser find-in-page (Ctrl+F).
API Reference
JavaScript
| Element | Attributes | Description |
|---|---|---|
| Trigger | id="mct:collapsible:*" | Trigger ID (required) |
aria-expanded | "true" or "false" | |
aria-controls | Content element ID | |
| Content | id="mcc:collapsible:*" | Content ID (required) |
aria-labelledby | Trigger element ID | |
aria-hidden | "true" or "false" | |
hidden="until-found" | Set when closed, removed when open |
Frameworks
All components accept className (React) or standard attributes (Vue) for styling. The Vue API is identical.
Collapsible.Root
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Whether expanded by default |
Collapsible.Trigger
The button that toggles the collapsible.
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | — | Connect to a Panel without a Root (React only) |
open | boolean | false | Initial expanded state, disconnected usage (React only) |
Collapsible.Panel
The content that is shown or hidden. Uses hidden="until-found" for find-in-page support.
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | — | Connect to a Trigger without a Root (React only) |
open | boolean | false | Initial expanded state, disconnected usage (React only) |