Accordion
The accordion pattern is backwards-compatible with previous implementations used on the Study at St Andrews website – see old-accordion example, below. This support will be removed at some point, so please do not use the old accordion markup.
The accordion pattern presents an expandable and collapsible section of content. Accordions shorten pages and reduce scrolling, but they require users to click on topic headings to find information. Therefore, accordions should be used sparingly and with care. For more information see Nielsen Norman Group report on accordion usability.
Usage
- Should not be used when your audience needs most or all of the content on the page to answer their questions. It is better to show all page content at once when the use case supports it. In such cases, do not worry about page length.
- Should be used when users only need a few key pieces of content on a single page.
- May be used anywhere in a content section.
- Must not be used on a home page.
- Must not be used in an aside.
Examples