Collapsible sections

Collapsible sections (or accordions) can be handy for long, complex contents. You can break down your contents into sub-sections and make each sub-section collapsible. This layout helps to make your page more accessible and readable, but you should also consider whether the information should be broken over multiple pages or if page tabs would be more suitable.

Page tabs are quite similar to accordions in that the information is divided into different collapsible sections. Whereas accordions are stacked vertically and page tabs are stacked horizontally.

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, such as FAQ sections. If you collapse all the sections on your page and they need to be read sequentially, this is likely to frustrate your visitors.

Overview

To make a section collapsible, you need a combination of two classes .accordion and .panel and an attribute of tabindex="0 for accessbility.

You also need two essential files.

<link rel="stylesheet" href="https://webstyle.anu.edu.au/styles/css/utilities/accordion.css">
<script src="https://webstyle.anu.edu.au/styles/js/src/accordion.js"></script>

To include all styles and JavaScript functions, you need these two files

<link rel="stylesheet" href="https://webstyle.anu.edu.au/styles/css/export.css">
<script src="https://webstyle.anu.edu.au/styles/js/dist/export.js"></script>

Below is an example:

Undergraduate students

Content for undergraduate students.

Graduate students

Content for graduate students.

Visitors

Content for visitors.

Staff

Content for staff.

Alumni and friends

Content for alumni and friends.


                <div>
                    <h2 class="accordion" tabindex="0">Undergraduate students</h2>
                    <div class="panel" tabindex="0">
                        <p>Content for undergraduate students.</p>
                    </div>
                ...
                    <h2 class="accordion" tabindex="0">Alumni and friends</h2>
                    <div class="panel" tabindex="0">
                        <p>Content for alumni and friends.</p>
                    </div>
                </div>

Customisation

This table shows the effect of different combinations

VersionCodeEffectFunctions
V1 - Current, the most concise one (requires least user effort)
<h2 class="accordion">Undergraduate students </h2>
<div class="panel">
    <p>Content for undergraduate students.</p>
</div>
<h2 class="accordion">Graduate students</h2>
<div class="panel">
    <p>Content for graduate students.</p>
</div>
<h2 class="accordion">Visitors</h2>
<div class="panel">
    <p>Content for visitors.</p>
</div>
<h2 class="accordion">Staff</h2>
<div class="panel">
    <p>Content for staff.</p>
</div>
<h2 class="accordion">Alumni and friends</h2>
<div class="panel">
    <p>Content for alumni and friends.</p>
</div>

Undergraduate students

Content for undergraduate students.

Graduate students

Content for graduate students.

Visitors

Content for visitors.

Staff

Content for staff.

Alumni and friends

Content for alumni and friends.

Type: disclosure

Click event: enalbed

V2 - with a plain div wrapper
<div>
    <h2 class="accordion">Undergraduate students </h2>
    <div class="panel">
        <p>Content for undergraduate students.</p>
    </div>
    <h2 class="accordion">Graduate students</h2>
    <div class="panel">
        <p>Content for graduate students.</p>
    </div>
    <h2 class="accordion">Visitors</h2>
    <div class="panel">
        <p>Content for visitors.</p>
    </div>
    <h2 class="accordion">Staff</h2>
    <div class="panel">
        <p>Content for staff.</p>
    </div>
    <h2 class="accordion">Alumni and friends</h2>
    <div class="panel">
        <p>Content for alumni and friends.</p>
    </div>
</div>

Undergraduate students

Content for undergraduate students.

Graduate students

Content for graduate students.

Visitors

Content for visitors.

Staff

Content for staff.

Alumni and friends

Content for alumni and friends.

Type: disclosure

Click event: enalbed

V3 - With wrapper div.anu-collapsible-accordion
<div class="anu-collapsible-accordion">
    <h2> <button class="accordion">Undergraduate students</button>  </h2>
    <div class="panel">
        <p>Content for undergraduate students.</p>
    </div>   
    <h2> <button class="accordion">Graduate students</button> </h2>
    <div class="panel">
        <p>Content for graduate students.</p>
    </div>           
    <h2>  <button class="accordion">Visitors</button>  </h2>
    <div class="panel">
        <p>Content for visitors.</p>
    </div>              
    <h2> <button class="accordion">Staff</button>  </h2>
    <div class="panel">
        <p>Content for staff.</p>
    </div>               
    <h2> <button class="accordion">Alumni and friends</button>  </h2>
    <div class="panel">
        <p>Content for alumni and friends.</p>
    </div>
</div>

Content for undergraduate students.

Content for graduate students.

Content for visitors.

Content for staff.

Content for alumni and friends.

Type: disclosure

Click event: enalbed

V4 - With wrapper div.anu-collapsible-disclosure
<div class="anu-collapsible-disclosure">
    <h2> <button class="accordion">Undergraduate students</button>  </h2>
    <div class="panel">
        <p>Content for undergraduate students.</p>
    </div>
    <h2> <button class="accordion">Graduate students</button> </h2>
    <div class="panel">
        <p>Content for graduate students.</p>
    </div>
    <h2>  <button class="accordion">Visitors</button>  </h2>
    <div class="panel">
        <p>Content for visitors.</p>
    </div>        
    <h2> <button class="accordion">Staff</button>  </h2>
    <div class="panel">
        <p>Content for staff.</p>
    </div>            
    <h2> <button class="accordion">Alumni and friends</button>  </h2>
    <div class="panel">
        <p>Content for alumni and friends.</p>
    </div>
</div>

Content for undergraduate students.

Content for graduate students.

Content for visitors.

Content for staff.

Content for alumni and friends.

Type: disclosure

Click event: enalbed

This table shows different attributes you can adjust

HTML element or attributesRequiredDescription
class="accordion"Yes

You can use any of following.

<h1 class="accordion"> </h1 >
 
<h2 class="accordion"> </h2 >
...
 
<h6 class="accordion"> </h6 >
<h2> < button class="accordion"> </button ></h2 > (support Screen Reader)
class="panel"Yes 
tabindex="0" class="accordion"Yes

Make the element focusable so that you can use "Tab" to navigate.

If you don't have this, our Javascript will automatically populate for you. The risk is in browsers don't support JavaScript, this function is not working.

If you add tabindex="0", then above concern is gone.

aria-expanded="true" class="accordion" YesFor Screen Reader to announce the current collapse/expanded state
<div class="anu-collapsible-accordion"> </div>YesFor Accessibility (AA) test.
<div class="anu-collapsible-disclosure"> </div>YesFor Accessibility (AA) test.

Use cases

All cases pass the Color Contrast test of accessbility(AA).

Case 1: Accordion under .bg-tint background

Undergraduate students

Content for undergraduate students.

Graduate students

Content for graduate students.

Visitors

Content for visitors.

Staff

Content for staff.

Alumni and friends

Content for alumni and friends.

Case 2: Accordion under .bg-black background

Undergraduate students

Content for undergraduate students.

Graduate students

Content for graduate students.

Visitors

Content for visitors.

Staff

Content for staff.

Alumni and friends

Content for alumni and friends.

Accessibility

Before using collapsible sections on your webpage, be sure to consider all the pros and cons, and explore the best way to present your information that provides a high level of accessibility.

Accordions are useful when the reader only needs a few specific pieces of information from this page, and it provides a better user experience because

  • Collapsing the page minimises the scrolling action
  • It helps the readers to retrieve information that they want faster, and it helps the user to stay focused.
  • The use of accordions makes the page structure clearer.

But it is important to keep in mind that accordions are not always a good solution to present information. When all information that's been presented on the page is relevant to the user, it is better to present the content in text paragraphs, even it causes a longer page. Because accordions increase interaction costs, and this means the user will need to click on every accordion to view the content, which is considered a wasted effort. In this case, the application of accordions actually decreases the page's accessibility.

Screen reader

To pass Screen Reader accessibility, the must is integrating `tabindex=”0” ` in your accordion for the function of Keyboard Navigation.

We don’t use aria-* attribute tags for simplicity, so the user doesn’t need to change the current accordion HTML markup.

With our JavaScript, the user does NOT need to do anything that the accordion widget will work with Screen Reader for backward compatibility.

But in the future, the user is encouraged to add `tabindex=”0” ` in the accordion by themselves for JavaScript browser compatibility. Namely, in case the browser doesn’t support JavaScript, the Screen Reader Accessibility will NOT be affected.

Keyboard support

EelmentKeyValueActionAccessbility
.accordionTabtabindex="0"Navigate the Screen Reader to each section(accordion header or panel).
Using tabindex="0" can put the item in the normal tab flow.		Screen Reader

Caution 1: If you are using tabindex HTML attribute to help Screen Reader navigation content, please make sure values are all 0, namely tabindex="0", so that the content will flow in the nature order, otherwise the order will be messed up and your reader would be confused. Expecially when there are many components in your website, misused tabindex would cause great pain to reorder the content.

Caution 2: There maybe inconsistency between the order of DOM elemments and order of visually displayed elements. For example, the following CSS styles will change the nature of tab order. Please double check the tab order when comply to the Accessbility with the presence of the following cases.

  • position: absolute;
  • position: relative;
  • float: left;
  • float: right;

Browser support for Javascript

Report problems with the compability of Javscript by raising the service ticket.

FeatureTypeNote
Panel expanding/shrinkingAccordion functionNo
Tab navigationAccessbility - Screen ReaderUsers are encouraged to have tabindex="0" to pass accessibilty. The Jasvacript we provided would add tabindex="0" automatically if these are forgoten by users or the values are not 0. But please be mindful that for browsers which do not support Javascript, missing tabindex="0" would be prone to fail the accessbility. In other words, you shouldn't rely on our Javascript.