Close

Accordion

An accordion is a group of collapsible panels containing content and links. They are useful when there is a lot of information that could overwhelm the user if displayed all at once. Accordions can group information into smaller digestible chunks.

Default accordion

The default accordion is used in pagebuilder widgets and templates.

<div class="faq js-faq" role="tab">
	<div class="faq-head" role="button" aria-expanded="false" aria-controls="faq-0">
		<h3 class="has-text-weight-bold" id="faq-0-heading"> Which campus do I need to attend?</h3>
		<i class="faq-arrow fas fa-chevron-down"></i>
	</div>
	<div id="faq-0" class="faq-body" role="tabpanel" aria-labelledby="faq-0-heading">
		<div class="cms-content">
			<p>Make sure you check the location of the sessions on your itinerary - you don&#39;t want to end up at the wrong campus! Some visitors will have to visit more than one campus on the day. The campuses you need to visit will be shown on your itinerary.</p>
		</div>
	</div>
</div>

Usage

Accordions are only necessary if the amount of content on a page is frustrating or overwhelming to users and if your content can be organised into meaningful groups that are easily identified by a title.

Do not change or override the default background colours.

Accessibility

Ensure you correctly apply the ARIA landmark roles and properties:

  • the wrapping div should have role="tablist" and aria-multiselectable="true"
  • each tab should have role="tab"
  • each tab header should have role="button"
  • each button should have an aria-controls="" with an unique id that matches the tabpanel id, i.e. faq-0 in the example
  • each tab content should have role="tabpanel"
  • each tabpanel should have an aria-labelledby="" with an unique id that matches the button heading id , i.e. faq-0-heading in the example.

If you have any questions or suggestions for improvements, please contact the Web Team.