Accordion

v8.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 @gold.au/accordion
Tags
Requires
Contributors
  • Julian Fleetwood avatar picture
  • Dominik Wilkowski avatar picture
  • Alex Page avatar picture
  • Alexander Sadleir avatar picture
  • Raj Ghuman avatar picture
  • Trevor Brennan avatar picture
  • Gary Broadbent avatar picture
  • Simon Schwartz avatar picture
  • Patrick De Young avatar picture
  • Nathan Davison avatar picture

React Usage

import AUaccordion from '@gold.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 '@gold.au/accordion';

pancake import

import AUaccordion from './accordion';