Reactive CSSexamples
Documents v0.9.0 · previews run the real runtime · experimental features are marked exp

Accordion

Each item opens and closes on its own, and its button reports the state with aria-expanded.

state()toggle()--attr-*when()experimental
Live previewreal runtime
View sourceOpen in Playground ↗

Click a question, or focus it with Tab and press Enter or Space.

How it works

  • state()line 3Makes each matching element the owner of an independent state with an initial value.
  • toggle()line 5Flips a boolean state. In an :on() rule it is the mutation --open: toggle().
  • --attr-*line 7--attr-<name>: <value> writes one allowlisted HTML attribute of the matched element from a reactive value: ARIA states such as aria-expanded, aria-checked or aria-disabled, disabled, hidden, tabindex or data-*. The only custom-property namespace with DOM semantics.
  • when()line 9Picks one of two values from a condition. Boolean conditions compile to native if() where supported.

State ownership. --open is declared on .item, so every item has its own copy: a click on one button toggles only the state of the item around it.

Native CSS alternative

<details> and <summary> give an accordion with no script and the right semantics, and <details name="faq"> makes it exclusive. Prefer them when nothing else on the page needs to know which item is open; this version shows how state stays per item.

Limitations

  • The answers are hidden with display: none, so the browser’s find-in-page does not open them, unlike <details>.

Implementation

2 files · 9 lines
style.cssreactive
/* ---- Reactive CSS -------------------------------------------------------------------------- *//* Each item owns its own state: opening one leaves the others as they are. */.faq .item { --open: state(false); }.faq .item > button:on(click) { --open: toggle(); }.faq .item > button { --attr-aria-expanded: var(--open); }.faq .item:when(--open) .body { display: block; }.faq .item .chevron { rotate: when(--open, 180deg, 0deg); }
state()Function · hover any red tokenMakes each matching element the owner of an independent state with an initial value.Reference →

Source: site/src/catalog/interfaces/accordion/. style.css from its Reactive CSS divider; the layout above it and the shared api.css run but are not shown.

Next recommendedDropdown menu →A menu that opens on click and closes on Escape, on a choice or on a click anywhere else.← All examples
Related

Theme switcher

One keyword state cycles through three themes, and the page colors and the button label follow it.

experimentalstate()cycle():when()content

Signup form

A text field, a select and a checkbox feed a live preview, and Reset clears both.

experimentalstate():on()event()content:when()

Step wizard

Three steps with Back and Next buttons, a step list you can click, and aria-current on the current step.

experimentalstate():on()set():nth-var()--attr-*