# Collapsible One section that opens in place. A square key sits at the start of its head with a printed chevron; opening latches the key below the plate and turns the chevron down, and the text slides out under the head on a grid row that grows from nothing, so it is never given a height of its own. It is a native details element, so it works with no script. Kit part · Free · https://tactileui.dev/parts/collapsible - Element: `

` - Needs: `kit.css` and `kit.mjs` ([how to install the kit](https://tactileui.dev/docs/installation#the-kit)) - Categories: Accordions - Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED - Volumes: Tactile, Quiet ## Variants ### Closed ```html

Advanced options

Exports run in the background now, and the settings page loads in half the time.

``` ### Open ```html

Advanced options

Exports run in the background now, and the settings page loads in half the time.

``` ### With a count at the end ```html

Attachments 4 files

Quarterly letter.pdf, Map.png, Notes.txt and Sketch.png.

``` ### On a plate · .tui-collapsible--plate ```html

Delivery notes

Leave with the neighbour at number 14 if nobody answers.

``` ### Long head wraps ```html

A head that is a good deal longer than the row it sits in, so it wraps under its key 2

Exports run in the background now, and the settings page loads in half the time.

What changed in 4.2 3 changes

Exports run in the background now.

``` ```js import { toggleCollapsible } from '/kit/kit.mjs'; // Opens or closes one from code, easing the close as a press does. toggleCollapsible(document.querySelector('.tui-collapsible')); // flip it toggleCollapsible(details, true); // open it details.addEventListener('toggle', () => save(details.open)); // native, fires after the close is done ``` The demo on the page: ```html

Release 4.2 · LodeCurrent

What changed 3 changes

Exports run in the background.
The settings page loads in half the time.
Keyboard shortcuts are listed under Help.

Known issues 1 open

Very long project names are cut short in the sidebar. A fix is planned for 4.3.

Upgrading from 4.1

Nothing to do: your settings move across the first time you sign in.

``` ## Usage notes Press the head, or Tab to it and press Space: the key sinks, the chevron turns and the text slides out, and pressing again slides it away. Each section is on its own, so opening one never closes another. The one on a plate stands apart on a page. ## Accessibility - It is a `

` with a `

`, so a screen reader says “Release notes, collapsed” or “expanded” and the keyboard works with no script and no ARIA. - The chevron and the key are drawn and hidden from a screen reader, since the head already says the state; the state is also told by the key sitting lower with its chevron turned, so it is not colour. - Closed text is not in the page for a screen reader or the Tab key, because the browser takes it out, and while it slides away it cannot be pressed. - Focus is a 2px ring round the whole head. On a phone the head is at least 48px tall and the key grows to 28px, and the whole row is the press. - Under reduced motion the key and the chevron do not move between states, the text arrives and leaves at once, and nothing is left out. ## How it’s built The head is the accordion’s: a summary that is a row, with the same cap on a skirt that latches below the plate. The key is a separate little box so the chevron on it can turn on its own as the key sinks. The text is a grid whose one row grows from 0fr to 1fr when the section opens; closing runs the same row back with a transition, held by the script for the 200ms it takes before the details element is allowed to hide it. ## Rules Fold away one section of a page behind a square key: release notes, advanced options, a long note. The accordion’s single-row cousin. The full rules are in `collapsible.rules.md` in the brain, which ships with the Kit. ## Related parts - [Accordion](https://tactileui.dev/parts/accordion): Printed sections that open in place. Each head ends in a small square key printed +; open, the key latches below the plate and reads −. - [Panel](https://tactileui.dev/parts/panel): A face plate that groups what belongs together: a head, a rule, then the parts. Screws only on device-like panels. - [Key](https://tactileui.dev/parts/key): Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.