Collapsible sections

Collapsible sections can be useful for laying out long pages, but you should also consider whether the information should be broken over multiple pages or if page tabs would be more suitable.

Like page tabs, collapsible sections are only appropriate when the visitor is not expected to read all the content - they are expected to only be interested in certain sections (eg for different audiences). If you collapse all the sections in your page and they need to be read sequentially, this is likely to frustrate your visitors.

To make a section collapsible, add the anutoggle class to a container. For example:

<h2 class="nounderline">Undergradate students</h2>
<div class="anutoggle">
  <p>Content for undergraduate students.</p>

Undergraduate students

Content for undergraduate students.

Graduate students

Content for graduate students.


Content for visitors.


Content for staff.

Alumni & friends

Content for alumni and friends.

Updated:  7 June 2021/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle