FAQ 2.7
An accordion is a list of headers that hide or reveal additional content when selected.
When to use: If users will only need a few specific pieces of content within a page.
When not to: If users need to see most or all of the information on a page. Use well-formatted text instead.
Notes: Content hidden in accordions hurts SEO and is not indexed by search crawlers.
(ADA REQUIRED) the `faq-show-all` button can be used to expand all the answers so they can be searched using Ctrl+F. Update the `toggleShow` to indicate all the items you would like to make visible when the button is clicked.
Frequently Asked Questions
An accordion menu is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them. It is one of many ways you can expose content to users in a progressive manner.
While accordions sound ideal for presenting complex content, like with many other widgets and implementations, they are not a one-size-fits-all solution. There are major downsides to accordions.
- Forcing people to click on headings one at a time to display full content can be cumbersome.
- Accordions increase interaction cost.
- Hiding content behind navigation diminishes people’s awareness of it.
- Accessibility is an important consideration.
- Printing problems
- Myth #1: Users don’t scroll long pages
- Myth #2: Customers don’t read information at the bottom of the page
- Myth #3: People avoid pages with a lot of content
Accordions should be avoided when your audience needs most or all of the content on the page to answer their questions. Better to show all page content at once when the use case supports it. In such cases, don’t worry too much about page length. Relevance trumps page length.
src/scss/base/_components.scss, line 224