Usage

  • Expanders hide content from people by default, limiting its consumption
  • Use these components to expand accessory content

What to avoid

  • Do not place mission critical information inside an expander
  • Do not use these for FAQs… in fact, just don’t use FAQs
    • If you have FAQs, stop. Rewrite your content to explain features in context, rather than expecting people to read questions you hope they’ll ask in some other context
  • Avoid accordion style expanders that collapse when another expander is open (this entry uses “accordion” because some people call them that)

Working example

About the NATO alphabet The (International) Radiotelephony Spelling Alphabet, commonly known as the NATO phonetic alphabet, is the most widely used set of clear code words for communicating the letters of the Roman alphabet.

Further reading

  • Nielsen Norman Group study: The caret icon most clearly indicated to users that it would open an accordion in place, rather than linking directly to a new page.
  • Proximity Principle in Visual Design: Design elements near each other are perceived as related, while elements spaced apart are perceived as belonging to separate groups.

Annotations for expanders

  • Most of the time, your developers will be pulling from a code library with well defined expanders, so it’s not really necessary to annotate if it’s well documented
  • If you are creating new expanders for a design system:
    • <details> for the expander container
    • <summary> for the title
    • Note that any expanded/collapsed icons are decorative

Related expander accordion entries