Craft

Progressive disclosure on long pages

A TOC spine, an accordion, and a details element walk into a spec. Each hides information — the craft is choosing which reader burden each one lifts.

Beginner1 min read (computed · recorded 7)updated 2026-09-12ianavigationlong-pages

by Motif Editors

revised 2026-09-12 — First publication in bank-3 batch 4.

Key takeaways

— TOC orients, accordions reduce scroll, details reduce weight.
— A closed state must describe its open state well enough to skip.
— Flatten the page (print, 200% zoom) to test the structure.

Three tools, three burdens

The TOC spine lifts orientation: it says what's here and where you are. It hides nothing — it is a map, not a lid.

The accordion lifts scroll cost: it hides content the reader probably doesn't need, and says so with its label. Its rule: the closed state must describe the open state well enough to skip it.

The details element lifts page weight, sometimes literally. Use it when the content is secondary by role (legal, transcript), not by importance — 'important but hidden' is how features disappear.

The long-page test

Print the page (or zoom to 200%). If the structure survives being flattened, your disclosure was progressive. If the narrative breaks, the page was hiding a dependency, not a detail.

toc-spine — the map, as a component →disclosure-list — the lid, as a component →

Practise the lesson

Theory sticks when you ship it. These original Motif assets put this guide's lesson to work — open one and copy it into your own page.

Disclosure List (Accordion)practice Scene Accordionpractice Nav Dockpractice

Keep learning

All guides Try the interactive Lab