Use disclosure details for one optional in-place explanation, accordion for several related show-hide sections, inline message for visible contextual feedback, and related links for onward destinations.
Use disclosure details for one optional in-place explanation, accordion for several related show-hide sections, inline message for visible contextual feedback, and related links for onward destinations.
Practice the judgment: Imagine this situation: A page uses several details disclosures as a full accordion but lacks section headings, state summaries, and expand-all behavior. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Disclosure / details | Accordion | Inline message | Related links |
|---|---|---|---|---|
| UI or UX | UI + UX - Single in-place reveal for optional supporting content | UI + UX - Grouped show-hide sections for related page content | UI + UX - Contextual in-flow feedback | UI + UX - Curated onward links connected to the current content |
| UI guidance | Render one clearly labelled disclosure control with a visible summary that predicts the revealed content, followed immediately by the hidden explanation, example, or supporting note. | Render each section title as a real button inside an appropriate heading, expose expanded or collapsed state, and connect the button to the panel it controls. | Render the message inside the same row, card, panel, form section, or task region that it describes, with a clear tone, concise title, body text, and at most one local action or detail disclosure. | Render a short, labelled collection of links whose destinations are closely related to the current content, using destination-specific link text and optional relation labels such as service, guidance, external, or PDF. |
| UX guidance | Use disclosure details when a short explanation, example, eligibility note, or calculation help is useful to some users but would slow most users if always visible. | Use an accordion when a page has several related sections that users may inspect selectively while still needing an overview of all section labels. | Use inline messages when users need contextual feedback while continuing nearby work, such as a row-level warning, section-level success, local policy note, or task-specific next step. | Use related links to support users who have finished or understood the current content and need a relevant next page, adjacent service, reference, or follow-up resource. |
| Good UI | A tax form shows a summary labelled How we calculate household income, revealing a short worked example below the income field. | A product policy page shows Shipping, Returns, Warranty, and Contact sections as heading buttons with clear expanded states and one open panel. | An invoice row shows Missing billing contact directly beneath the affected customer with Add contact as the only action. | A benefits guidance page ends with Related links: Check eligibility for support, Upload evidence for your claim, and Appeal a support decision, each with a concise relation label. |
| Bad UI | A page uses ten Details controls as section navigation, with some triggers revealing text and others opening pages. | Collapsed rows look like navigation links, but clicking them only reveals hidden page text. | A section message contains a full support workflow, several links, and unrelated settings controls. | A page ends with More information containing Home, Contact us, Apply now, Old 2018 guidance, Help, and an unrelated account settings link. |
| Good UX | A user opens the calculation help, reads one example, closes it, and the nearby income field value remains unchanged. | A user opens Returns, then Warranty, scans both sections, collapses Returns, and the page keeps focus and open-state feedback stable. | A successful send message remains beside the invoice long enough to copy the generated reference. | A user reads claim renewal guidance, chooses Upload evidence for your claim, and sees why that destination is the next useful service page. |
| Bad UX | Users miss a deadline because the deadline is hidden inside a collapsed disclosure with a vague label. | A user misses eligibility requirements because the only required step is hidden inside a collapsed section by default. | The message disappears like a toast even though users still need the invoice reference. | Users follow a generic More information link and land on an unrelated policy collection. |
| Best fit | One short supporting explanation belongs in place beside the content it clarifies. | Section headings provide a useful overview and users can choose which details to inspect. | A visible object or section has local status, warning, success, or next-step information. | The current page has a few genuinely adjacent pages, services, programs, or resources users often need next. |
| Avoid when | The content is required to make the right decision. | There is only one revealable section and a simpler details disclosure is enough. | The message is a one-field validation correction. | Links are only loosely associated by topic tags or organizational ownership. |
| Required state | Closed state with a specific summary label and hidden supporting content. | All collapsed state with every section title visible. | Informational inline message attached to the relevant object or section. | Default state with a labelled, curated related-links block and descriptive link text. |
| Accessibility burden | Use native summary behavior or a button that exposes expanded and collapsed state. | Use native buttons for section controls and expose expanded or collapsed state. | Keep the message in the reading order near the context it describes. | Use descriptive link text that makes sense out of context. |
| Common misuse | Using vague summaries such as More, Details, or Click here. | Hiding content users must read sequentially before completing a task. | Using an inline message for a single field error that should be connected to that input. | Using related links as a catch-all further-reading dump. |