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 create a collapsible section, add the following code to the top of the page, within the body section:

<script>$=$anujq;</script>
<script src="//style.anu.edu.au/_anu/4/scripts/collapse.js" type="text/javascript">
</script>
 

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

<h2 class="nounderline">Undergradate students</h2>
<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.

Updated:  18 August 2017/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle