Collapse

A button that opens and closes a region elsewhere on the page - help under a toolbar, more filters, the details of a row - by the library's own command, --toggle. A closed region is hidden="until-found", so the browser's find in page still reaches its words and opens it. A section that opens under its own header is an accordion.

Examples

The button carries command="--toggle", names its region in aria-controls and says in aria-expanded whether the region is open: write it as the region starts, and the library keeps it. It takes no commandfor: WebKit would then tell a screen reader the button is collapsed whatever its aria-expanded says.

<div class="hstack gap-8">
	<button class="btn btn-sm" type="button" command="--toggle" aria-controls="collapse-help-text" aria-expanded="false"><i class="bi bi-question-circle" aria-hidden="true"></i>How prices work</button>
</div>
<div id="collapse-help-text" hidden="until-found">
	<p class="text-muted">A price is per person. Children from four to eleven pay the child price; under four they travel free.</p>
</div>

Open from the start

A region without hidden starts open, its button aria-expanded="true".

<div class="hstack gap-8">
	<button class="btn btn-sm" type="button" command="--toggle" aria-controls="collapse-open-filters" aria-expanded="true"><i class="bi bi-funnel" aria-hidden="true"></i>More filters</button>
</div>
<div id="collapse-open-filters" class="hstack flex-wrap gap-8">
	<button class="chip" type="button" aria-pressed="true">With lunch</button>
	<button class="chip" type="button" aria-pressed="false">Private</button>
	<button class="chip" type="button" aria-pressed="false">Sunset</button>
</div>

A chevron and words that follow

Inside a button with aria-expanded, an icon toggle-chevron turns over while the region is open, toggle-open shows only then and toggle-closed only while it is closed - by CSS alone, from the state the button already says.

<div class="hstack gap-8">
	<button class="btn btn-sm" type="button" command="--toggle" aria-controls="collapse-chevron-text" aria-expanded="false"><span class="toggle-closed">Show the route</span><span class="toggle-open">Hide the route</span><i class="bi bi-chevron-down toggle-chevron" aria-hidden="true"></i></button>
</div>
<div id="collapse-chevron-text" hidden="until-found">
	<p class="text-muted">The pier at 08:30, the emerald lake at 11:00, lunch on Emerald Islet, back by 17:00.</p>
</div>

A details row in a table

A row under a row opens and closes the same way: the region is a <tr> with one cell across the table. A table's row cannot be hidden "until found", so it starts as plain hidden and closes so again; find in page does not open it.

When	What	Details
12:40	3 excursions
North Bay, Turtle Cove and the sunset cruise, with their photos and reviews.

<table class="table" aria-label="Deleted records">
	<thead><tr><th scope="col">When</th><th scope="col">What</th><th scope="col"><span class="visually-hidden">Details</span></th></tr></thead>
	<tbody>
		<tr>
			<td class="tabular-nums">12:40</td>
			<td>3 excursions</td>
			<td class="text-end"><button class="btn btn-sm btn-text" type="button" command="--toggle" aria-controls="collapse-row-details" aria-expanded="false">Details</button></td>
		</tr>
		<tr id="collapse-row-details" hidden>
			<td colspan="3">North Bay, Turtle Cove and the sunset cruise, with their photos and reviews.</td>
		</tr>
	</tbody>
</table>

Keyboard and accessibility

Key	On the button
`Enter`, `Space`	Opens or closes the region; every button for it says the new state

Find in page opens a closed region on a match where the browser has hidden="until-found" - Chrome, Firefox 148 and Safari 26.2 on - and the library marks its buttons open; in older browsers the region stays closed until its button opens it.
Put the region right after its button in the reading order, or name it, so a reader who opens it finds it.
From script: region.hidden = false opens it - set aria-expanded on its buttons yourself then.

From Bootstrap 5.3

Bootstrap 5.3	REDZ.UI	Change	Note
`collapse`	-	state	closed: hidden="until-found" on the region; open: no hidden; its button has command="--toggle"
`collapse-horizontal`	-	review	not planned: a region opens downward, in its place
`collapsing`	-	remove	the region opens at once
`data-bs-toggle="collapse"`	`command="--toggle" aria-controls="ID" aria-expanded="false"`	trigger	the region is hidden="until-found" while closed; in an accordion the item is a <details>
`bootstrap.Collapse`	`region.hidden = false`	review	and setAttribute('hidden', 'until-found') to close; set aria-expanded on its buttons then: a button with command="--toggle" does both