dta.gov.au

The .gov.au means it’s official

Australian government websites always use a .gov.au domain. Before sharing sensitive information online, make sure you’re on a .gov.au site by inspecting your browser’s address (or 'location') bar.

This site is secure.

The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Accordion

v7.0.0

Accordions help users see only the content they need. Accordions expand and collapse sections of content.

Released

History
View changes
Install
npm i @gov.au/accordion
Tags
Requires
Contributors
  • Alexander Sadleir avatar picture
  • Trevor Brennan avatar picture
  • Simon Schwartz avatar picture
  • Julian Fleetwood avatar picture
  • Patrick De Young avatar picture
  • Raj Ghuman avatar picture
  • Dominik Wilkowski avatar picture
  • Gary Broadbent avatar picture
  • Nathan Davison avatar picture
  • Alex Page avatar picture

Default

A singular method of expanding and collapsing a piece of content with a title. These are best used for transcripts of videos.

Example

<!--
  Light:  <section class="au-accordion">
  Dark:   <section class="au-accordion au-accordion--dark">

  Note: Accordion requires feature detection to see if a user has javascript.
        Please add a `no-js` class on html and replace it with `js` if enabled
        https://www.paulirish.com/2009/avoiding-the-fouc-v3/
-->

<section class="au-accordion">
  <button href="#accordion-default" class="au-accordion__title js-au-accordion" aria-controls="accordion-default" aria-expanded="true" aria-selected="true" onclick="return AU.accordion.Toggle( this )">
    Accordion title
  </button>

  <div class="au-accordion__body" id="accordion-default">
    <div class="au-accordion__body-wrapper">
      Here <a href="#url">is</a> some accordion content
    </div>
  </div>
</section>
/*
  Light:  <Accordion header="Accordion title">
  Dark:   <Accordion header="Accordion title" dark>

  Note: Accordion requires feature detection to see if a user has javascript.
        Please add a `no-js` class on html and replace it with `js` if enabled
        https://www.paulirish.com/2009/avoiding-the-fouc-v3/
*/

import AUaccordion from '@gov.au/accordion';

<AUaccordion header="Accordion title">
  Here <a href="#url">is</a> some accordion content
</AUaccordion>

Accordion group

A group of accordions that expand and collapse on click. Notice that the accordions only change the one that is clicked.

Example

<!--
  Light:  <section class="au-accordion">
  Dark:   <section class="au-accordion au-accordion--dark">

  Note: Accordion requires feature detection to see if a user has javascript.
        Please add a `no-js` class on html and replace it with `js` if enabled
        https://www.paulirish.com/2009/avoiding-the-fouc-v3/
-->
<ul class="au-accordion-group">
  <li>
    <section class="au-accordion">
      <button href="#accordion-group-1" class="au-accordion__title js-au-accordion au-accordion--closed" aria-controls="accordion-group-1" aria-expanded="false" aria-selected="false" onclick="return AU.accordion.Toggle( this )">Accordion group 1</button>

      <div class="au-accordion__body au-accordion--closed" id="accordion-group-1">
        <div class="au-accordion__body-wrapper">
          Here <a href="#url">is</a> some accordion content
        </div>
      </div>
    </section>
  </li>

  <li>
    <section class="au-accordion">
      <button href="#accordion-group-2" class="au-accordion__title js-au-accordion au-accordion--closed" aria-controls="accordion-group-2" aria-expanded="false" aria-selected="false" onclick="return AU.accordion.Toggle( this )">Accordion group 2</button>

      <div class="au-accordion__body au-accordion--closed" id="accordion-group-2">
        <div class="au-accordion__body-wrapper">
          Here <a href="#url">is</a> some accordion content
        </div>
      </div>
    </section>
  </li>
</ul>
/*
  Light:  <Accordion header="Accordion title">
  Dark:   <Accordion header="Accordion title" dark>

  Note: Accordion requires feature detection to see if a user has javascript.
        Please add a `no-js` class on html and replace it with `js` if enabled
        https://www.paulirish.com/2009/avoiding-the-fouc-v3/
*/

import AUaccordion from '@gov.au/accordion';
<ul className="au-accordion-group">
  <li>
    <AUaccordion closed={ true } header="Accordion group 1">
      Here <a href="#url">is</a> some accordion content
    </AUaccordion>
  </li>
  
  <li>
    <AUaccordion closed={ true } header="Accordion group 2">
      Here <a href="#url">is</a> some accordion content
    </AUaccordion>
  </li>
</ul>