USER INTERFACE · DISCLOSURE

Collapse

One block that shows and hides. Not a group — that’s an Accordion.
THEME
DENSITY
01

Playground

Build your collapse — compare with the default
PREVIEWclosed · aria-expanded="false"3 differences
Settings
TRIGGER
default: Button
ANIMATION
default: Height + fade
SPEED
default: 250 ms
CONTENT
default: Short
Reduce motion is on — content opens instantly.
DIFF FROM DEFAULT
− trigger="button"+ trigger="row"~ content: form+ lazy
02

Patterns

Six ways to hide content
Read moreclamp 3 lines · fade

Outerwear for SS27, shot in Berlin and on the Baltic coast. The brief asks for calm, honest light and real people — no studio gloss. We’ll scout three beaches north of Rostock in early November, shoot over two days with a crew of five, and deliver 40 retouched heroes plus a 60-second film for social. Lena wants the colour to stay close to the fabric swatches, so we’ll shoot a grey card in every setup.

Show N morefirst 3 always visible
Book the freight liftToday
Confirm crew call sheetToday
Pack 2 × Profoto B10Tomorrow
View detailsunder a row
AV-041Nordic Thread€19,718
Advanced optionsinside a form
Collapsible panelside filters 260 ↔ 56 px
◷Status3☺Client5▦Type2€Budget
14 projects
Section headertitle · count · ⌄
AV-041Nordic Thread12 d
AV-040Kaya Ceramics9 d
AV-036Mira Optics3 d
03

States

Closed, opening, open, disabled, loading
Closed
Opening
Open

Two rounds of retouch revisions are included per image.

Disabled
Loading on first openclick — 900 ms skeleton, then content
04

In Avava

Live — project, invoices, calendar, activity
Project descriptionRead more · remembers
NTSpring 27 campaignNordic Thread · Post-production

Calm, honest outerwear for SS27. Two shoot days on the Baltic coast, a crew of five, 40 hero images and a 60-second film. Grey card in every setup; colour stays close to the swatches. Retouch round 1 is due Oct 18, final delivery Oct 27. Lena signs off on selects, Jonas on the film.

Invoice linesper row
Calendar sidebarthree groups, each its own collapse
ShootsClient meetingsDeadlinesTeam
OliviaAlexJon
Activity logShow 12 earlier
YesterdayRetouch round 1 started
TodayLena commented on Hero 04
TodayAna uploaded 12 files
05

Collapse vs Accordion vs Tabs

Same content, three components
Collapseone block · independent
One thing to hide. Nothing else on the page depends on it.
Accordionone of many open
Digital + print, 12 months, Europe. Out-of-home needs an extension.
A set of related sections — opening one closes the rest.
Tabsswitch the view
Digital + print, 12 months, Europe. Out-of-home needs an extension.Same place, different content — something is always shown.
06

Rules & a11y

Attributes, focus and motion
Screen readers & keyboard
Trigger<button aria-expanded="false" aria-controls="col-1">
Panel<div id="col-1" aria-hidden="true" inert>
LabelChange it: “Show details” ↔ “Hide details”
FocusStays on the trigger — never jump into the panel
Hidden contentNot focusable while closed (hidden / inert)
Live checkPress the button with Tab + Enter — focus stays on it.aria-expanded="false"
Motion
Techniquegrid-template-rows 0fr → 1fr
Duration150–400 ms · default 250
Easingcubic-bezier(.2,.8,.2,1)
Fadeopacity with the same timing
Reduce motion0 ms — opens instantly
Read moremax-height 4.8em → 400px
DO✓Say what will appear: “Show 4 more”, not “More”✓Flip the label when open✓Keep the trigger where it was after opening✓Lazy-load heavy content on first open✓Remember the state when people come back
DON’T✕Hide errors or required fields inside a collapse✕Nest collapses more than one level✕Use a collapse for 3+ related sections — use Accordion✕Animate longer than 400 ms✕Make only the tiny chevron clickable