Accordion
v8.0.0Accordions 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
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';