Accordion
Sample accordion
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Overview
Use the accordion feature to display collapsible / expandable content, such as frequently asked questions.
Because interactive elements, such as the accordion feature, increase the cognitive load for your user, they are problematic when used inappropriately. Use another method to display content if any of these are true:
- The information is important for most of your website visitors to see (service hours, application instructions, usage guidelines, etc.)
- You expect people to be directed to your page from other sources (linked content, printed URLs, search engines) to locate information that would be hidden if nested in an accordion
- You are using the feature to achieve an aesthetic preference rather than to serve a functional need
- You are trying to increase the amount of content on a page
Alternative options include creating a longer page or splitting content into multiple pages. Longer pages are not problematic when they are well organized. It's not necessary to try to condense as much information as possible into a single screen.
Usage guidelines
- Use of this feature only to host information that is pertinent to a minority of your website audience
- Keep content in expandable sections to a minimum. Generally, display no more than two to three paragraphs per expandable section.