# 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 −. Kit part · Free · https://tactileui.dev/parts/accordion - Element: `

` - Needs: `kit.css` only, no script ([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 ### One open at a time · shared name ```html

Tariff

Flux, three rates a day.

Reserve

Kept for a power cut: 20%.

``` ### Several open · no name ```html

Circuits

Twelve on the board.

Meters

One import, one export.

``` ### Numbered, with a figure ```html

01Kitchen1.2 kW

Oven, hob and the dishwasher.

02Heat pump2.8 kW

On its own 20 A circuit.

``` ### Flush · the first head under a panel head ```html

Questions

Offline?

Yes.

Who sees it?

You.

01What does the hub measure?

Every circuit on the board, once a second.

02Does it work offline?

Yes. The hub keeps the schedule itself.

``` The demo on the page: ```html

01What does the hub measure?

Every circuit on the board, once a second: power, energy, and which way it is flowing. The readings stay on the hub; the app asks it for them.

02Does it work without the internet?

Yes. The hub keeps the schedule and the battery rules itself. Away from home you lose the app, and nothing else.

03How long does the battery last in a power cut?

With the reserve at 20% and the fridge, the router and the lights on, about nine hours. Raise the reserve under Battery to keep more back.

04Who can see my readings?

You, and anyone you invite. Nothing leaves the house unless you turn on the monthly report.

``` ## Usage notes Click a head, or Tab to it and press Enter or Space. Opening one closes the others: they share a name. ## Accessibility - Native `

` and `

`: each head is announced as a button that is expanded or collapsed, with no script at all. - The shared `name` is the browser’s own exclusive accordion; with no name, several sections can be open. - Keep links and keys out of the head: it is already a button. Put them in the body. - Keyboard: Tab reaches each head, and Enter or Space opens or closes its section. That is the browser’s own behaviour for a summary; the kit adds no keys of its own. - The key is drawn, not announced; the open state is carried by the element itself. Reduced motion drops the slide and keeps the text. ## How it’s built No script and no extra markup for the key: it is the summary’s `::after`, a 22px cap on a 1.5px skirt whose background is four layers (two ink bars for the +, the key’s top light and its face). Opening swaps the stack for three layers (the vertical bar goes, so it reads −) and gives it the pressed shadow and a 1.5px drop. The body arrives with a 200ms, 6px slide and a fade, on transform and opacity only. ## Rules Sections of one subject that people read a few of. Name the group when only one should stand open. The full rules are in `accordion.rules.md` in the brain, which ships with the Kit. ## Related parts - [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. - [Tabs](https://tactileui.dev/parts/tabs): Views of the same thing, switched in place: keys in a tray, the chosen view a raised cap. - [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.