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