menu
» Web style guide » Collapsible sections 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>
</div>
<div class="anutoggle">
<p>Content for undergraduate students.</p>
</div>
Undergraduate students
Content for undergraduate students.
Graduate students
Content for graduate students.
Visitors
Content for visitors.
Staff
Content for staff.
Alumni & friends
Content for alumni and friends.
