Digital pattern library

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. For more information see the Nielsen Norman Group report on accordion usability.

Rules for accordions

Options available


Single accordion

Code


Multiple accordions

Code


Old accordion

Old accordion pattern used to test backwards-compatibility; do not use this HTML in new sites.

MLitt, MRes, MSc

Quisque porttitor nisi sed justo posuere, ut sagittis lectus sodales. Proin tempus posuere libero. Quisque mauris ex, commodo vel finibus eu, iaculis id risus. Aenean id lorem vel lectus varius hendrerit vehicula quis sapien. Vestibulum non accumsan ante, et ullamcorper massa. In dictum mauris non accumsan gravida. Aliquam tortor mi, porttitor non feugiat eu, fermentum id magna. Nunc ornare mi risus, a cursus dui commodo at.

Code

MLitt, MRes, MSc

Quisque porttitor nisi sed justo posuere, ut sagittis lectus sodales. Proin tempus posuere libero. Quisque mauris ex, commodo vel finibus eu, iaculis id risus. Aenean id lorem vel lectus varius hendrerit vehicula quis sapien. Vestibulum non accumsan ante, et ullamcorper massa. In dictum mauris non accumsan gravida. Aliquam tortor mi, porttitor non feugiat eu, fermentum id magna. Nunc ornare mi risus, a cursus dui commodo at.