Details / Accordion
The native <details> element provides a disclosure widget for expandable content — FAQs, supplementary guidance, and progressive disclosure of regulatory information.
Use <details> inside Prose content to let readers opt in to additional content without leaving the page. It reduces page length while keeping procedural details, eligibility criteria, and regulatory definitions accessible on demand.
When to use
- Content is useful but not essential on first read — procedural details, eligibility criteria, regulatory definitions, and background context that supports but does not replace the main narrative.
- You want to reduce page length without hiding information behind navigation — accordions keep content on the same page, one interaction away.
- The reader should opt in to seeing the content — it enriches understanding but does not block the reader from completing their task.
- Building an FAQ section with multiple expandable questions — sequential accordions create a scannable question-and-answer format.
When not to use
- Don't hide critical warnings or required actions inside a collapsed accordion — if the user must see it, it belongs in the visible flow. Use a callout instead.
- Don't use a single accordion to hide content you think is "too long" — if the content is essential, show it. If it's not, consider removing it entirely.
- Don't use accordions for primary navigation — use the table of contents for document-level navigation.
Examples
Best practices
Write clear, specific summary text
Tell the reader what they'll find inside. Specific labels improve scanning and help users decide whether to expand.
Don't use vague labels
Labels like "More information" or "Click here" force the reader to expand the accordion just to find out what it contains.
Use multiple accordions in sequence for FAQ content
Each accordion operates independently, letting readers open only the questions they care about.
Don't nest accordions inside accordions
One level of disclosure is enough. Nesting creates a confusing interaction pattern and buries content too deeply.
Put substantive content inside
Paragraphs, lists, tables, and even callouts all work well inside an accordion. The component is designed for meaningful content blocks.
Don't put a single sentence inside an accordion
If the content is that short, just show it inline. The interaction cost of expanding an accordion is not worth a single line of text.
Group related questions with a heading above
A heading like "Frequently asked questions" or "Coverage details" gives the accordion set context and aids scanning.
Don't scatter individual accordions throughout body text
Isolated accordions break reading flow. Group them together or use a different component for inline supplementary content.
Interaction behavior
- Click or tap the summary bar to toggle the content open and closed.
- Enter and Space keys toggle the accordion when the summary is focused.
- The chevron rotates to point upward when open, providing a visual cue for the current state.
- Content animates open with a smooth reveal. Users who prefer reduced motion see the content appear instantly.
- Focus stays on the summary after toggling — the user decides whether to Tab into the revealed content.
- Each accordion operates independently — opening one does not close others.
Content guidelines
What types of accounts are covered by FDIC insurance?
Click to learn more about accounts
The interaction is self-evident from the component's appearance.
Eligibility requirements for pass-through insurance
Click here to expand eligibility requirements
Long summaries break the visual pattern and make the accordion group harder to scan.
How are joint account deposits insured?
How are deposits in joint accounts at FDIC-insured banks calculated for insurance coverage purposes?
Accessibility
- The accordion is fully keyboard accessible with no additional setup — Enter and Space toggle it, and screen readers announce the expanded or collapsed state automatically.
- Write summary text that makes sense on its own — screen reader users navigate by summary labels, so "More details" is meaningless without visual context.
- Don't hide critical information inside a collapsed accordion. Screen reader users may not realize important content is hidden.
- The chevron is decorative — its rotation conveys state visually but is not announced to assistive technology. The expanded/collapsed state is announced through the native element semantics.