Kit part · Accordions

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 −.

Element: <details>
Needs: kit.css
Rules: accordion.rules.md · 4
Finishes: Aluminium · Graphite · Porcelain · Black
Volumes: Tactile · Quiet

On this page

Variants
Every state, at once
API
Markup
Accessibility
How it’s built
Rules
Related parts

On the bench

Live

AluminiumGraphitePorcelainBlack

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.

Click a head, or Tab to it and press Enter or Space. Opening one closes the others: they share a name.

Variants

Tariff

Flux, three rates a day.

Reserve

Kept for a power cut: 20%.

One open at a time · shared name

Circuits

Twelve on the board.

Meters

One import, one export.

Several open · no name

01Kitchen1.2 kW

Oven, hob and the dishwasher.

02Heat pump2.8 kW

On its own 20 A circuit.

Numbered, with a figure

Questions

Offline?

Yes.

Who sees it?

You.

Flush · the first head under a panel head

Every state, at once

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

Aluminium

Part	Closed	Hover	Open	Focus
Plain	Reserve Kept for a power cut.	Reserve Kept for a power cut.	Reserve Kept for a power cut.	Reserve Kept for a power cut.
Numbered	01Reserve Kept for a power cut.	01Reserve Kept for a power cut.	01Reserve Kept for a power cut.	01Reserve Kept for a power cut.

Graphite

Part	Closed	Hover	Open	Focus
Plain	Reserve Kept for a power cut.	Reserve Kept for a power cut.	Reserve Kept for a power cut.	Reserve Kept for a power cut.
Numbered	01Reserve Kept for a power cut.	01Reserve Kept for a power cut.	01Reserve Kept for a power cut.	01Reserve Kept for a power cut.

API

Name	Kind	Values	What it does
.tui-accordion	class	on <div>	The stack: a printed rule above the first section and under each one.
.tui-accordion__item	class	on <details>	One section: a head you press and the text it opens.
summary	element	first child	The head, at least 52px tall. Its last thing is the key, drawn by the part.
name	attribute	any word	Native: sections that share a name close each other, so only one stands open.
open	attribute	—	Native: the section starts open and its key starts latched.
.tui-accordion__n	class	on <span>	An index printed before the head, 22px wide; the text below lines up with the words.
.tui-accordion__meta	class	on <span>	A figure or a status before the key, in the second ink.
.tui-accordion__body	class	on <div>	The text. It slides out 6px under the head as it opens.
.tui-accordion--flush	class	—	No rule over the first head or under the last: for the inside of a panel.
toggle	event	native	Fired on the <details> after it opens or closes; read .open.
Enter · Space	keyboard	—	Open or close the section whose head has focus.
Tab · Shift+Tab	keyboard	—	Move from head to head, and into an open section’s links.
.is-hover · .is-down · .is-focus	class	on summary	Forced states, for documentation and specimens only.

Markup

<div class="tui-accordion">
  <details class="tui-accordion__item" name="faq" open>
    <summary><span class="tui-accordion__n">01</span>What does the hub measure?</summary>
    <div class="tui-accordion__body"><p>Every circuit on the board, once a second.</p></div>
  </details>
  <details class="tui-accordion__item" name="faq">
    <summary><span class="tui-accordion__n">02</span>Does it work offline?</summary>
    <div class="tui-accordion__body"><p>Yes. The hub keeps the schedule itself.</p></div>
  </details>
</div>

Needs kit.css only, no script. How to install the kit.

Native <details> and <summary>: 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.
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

accordion.rules.mdIn the brain

Sections of one subject that people read a few of. Name the group when only one should stand open.

4 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.

See the Founder Pass How agents use the brain

Output