# 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](accordion.md). ## 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. ```html
``` ### Open from the start A region without `hidden` starts open, its button `aria-expanded="true"`. ```html
``` ### 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. ```html
``` ### A details row in a table A row under a row opens and closes the same way: the region is a `` 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. ```html
WhenWhat
12:40 3 excursions
``` ## 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
| | `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 |