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.8

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
  • Trevor Brennan avatar picture
  • Alex Page avatar picture
  • Nathan Davison avatar picture
  • Patrick De Young avatar picture
  • Dominik Wilkowski avatar picture
  • Gary Broadbent avatar picture
  • Alexander Sadleir avatar picture
  • Simon Schwartz avatar picture
  • Raj Ghuman avatar picture
  • Julian Fleetwood avatar picture

React Usage

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

<Accordion header="Open">
  Some content of the accordion <a href="#url">here</a>
</Accordion>

<Accordion closed header="Closed">
  Some content of the accordion <a href="#url">here</a>
</Accordion>

<Accordion header="Slow accordion" speed={ 1000 }>
  Some content of the accordion <a href="#url">here</a>
</Accordion>

<Accordion 
  header="With custom function" 
  onOpen={ () => { console.log('This function will run when the accordion opens'); } }
  afterOpen={ () => { console.log('This function will run after the accordion has opened'); } }
  onClose={ () => { console.log('This function will run when the accordion closes'); } }
  afterClose={ () => { console.log('This function will run after the accordion has closed'); } }
>
  Some content of the accordion <a href="#url">here</a>
</Accordion>

<Accordion closed={ this.state.accordionClosed } header="State controlled accordion open">
  Some content of the accordion <a href="#url">here</a>
</Accordion>
<button type="button" onClick={ () => { this.changeAccordion('accordionOpen') } }>
  Toggle accordion via state
</button>

Props

Prop name Type Description
header string The headline of the accordion
closed boolean Closed state, optional
speed number Speed of the animation in ms, optional
onOpen function A function executed when the accordion opens, optional
afterOpen function A function executed after the accordion opened, optional
onClose function A function executed when the accordion closes, optional
afterClose function A function executed when the accordion closes, optional
dark boolean A dark variation of the component

All other props are spread into the component

Exports

Name Type Description
AUaccordion default The accordion component

node_modules import

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

pancake import

import AUaccordion from './accordion';