Web Design Resources

Accordions

Description: user clicks on title, content area expands or collapses vertically.

  • Not a Substitute for a Well-Structured Page

    Accordions are a neat way to reduce the bulk of a page, but should not be used as a replacement of well-written content with proper heading usage.

  • Include "Expand All | Collapse All"

    Text content collapsed within an accordion will not be scanned if a user performs a "Find on Page." Consequently, it is important to include an Expand All | Collapse All section when using accordions.

  • Keep It Simple

    Use the simplest solution first. If your page works well using standard elements, don't complicate things by adding an accordion. It makes the page harder to edit and may confuse the user by offering unnecessary functionality.


Do

  • group topics into discrete sections
  • reduce page bulk caused by an abundance of text
  • use to help users skim long pages more efficiently
  • use on reference pages for return visitors
  • include Expand All | Collapse All to enable Find on Page to scan content within accordions

Don't

  • use as a replacement for headings
  • make your entire page accordions only