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

Divinity

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.

Code

Divinity

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.


Multiple accordions

Divinity

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.

Geography

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.

History

Morbi pellentesque, mauris nec porta laoreet, neque magna tempor eros, eget suscipit tellus purus nec ligula. In accumsan turpis eu porttitor tempus. Praesent rutrum quam id felis consequat, et mattis elit laoreet. Nunc maximus, dui vitae tincidunt elementum, elit tortor mattis quam, ut sodales arcu lectus eu nisi. Phasellus tincidunt at risus nec fringilla. Nunc ultricies nisl sodales, vestibulum nunc in, vulputate nisl. Vestibulum lacinia auctor hendrerit. Sed in lectus dapibus, volutpat justo vel, pellentesque ipsum. Vivamus vitae metus euismod, vestibulum odio eu, elementum quam.

Physics

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.

Nullam non interdum mauris, quis molestie sem. Proin aliquam purus vel pellentesque mollis. Curabitur vitae augue at velit sollicitudin consequat. Donec id convallis dui. Donec fringilla non justo at hendrerit. Proin dictum viverra cursus. Etiam eu viverra dui, at convallis diam. Donec finibus ut sapien ac dignissim. Nullam pulvinar mollis efficitur.

Code

Divinity

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.

Geography

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.

History

Morbi pellentesque, mauris nec porta laoreet, neque magna tempor eros, eget suscipit tellus purus nec ligula. In accumsan turpis eu porttitor tempus. Praesent rutrum quam id felis consequat, et mattis elit laoreet. Nunc maximus, dui vitae tincidunt elementum, elit tortor mattis quam, ut sodales arcu lectus eu nisi. Phasellus tincidunt at risus nec fringilla. Nunc ultricies nisl sodales, vestibulum nunc in, vulputate nisl. Vestibulum lacinia auctor hendrerit. Sed in lectus dapibus, volutpat justo vel, pellentesque ipsum. Vivamus vitae metus euismod, vestibulum odio eu, elementum quam.

Physics

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.

Nullam non interdum mauris, quis molestie sem. Proin aliquam purus vel pellentesque mollis. Curabitur vitae augue at velit sollicitudin consequat. Donec id convallis dui. Donec fringilla non justo at hendrerit. Proin dictum viverra cursus. Etiam eu viverra dui, at convallis diam. Donec finibus ut sapien ac dignissim. Nullam pulvinar mollis efficitur.


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.