@gold.au/accordion
============
> Allow the user to toggle the visibility of an element
## Contents
* [Install](#install)
* [Usage](#usage)
* [Dependency graph](#dependency-graph)
* [Tests](#tests)
* [Release History](#release-history)
* [License](#license)
----------------------------------------------------------------------------------------------------------------------------------------------------------------
## Install
```shell
yarn add @gold.au/accordion
```
```shell
npm install @gold.au/accordion
```
**[⬆ back to top](#contents)**
----------------------------------------------------------------------------------------------------------------------------------------------------------------
## Usage
* [API](#api)
* [React](#react)
* [jQuery](#jquery)
**[⬆ back to top](#contents)**
----------------------------------------------------------------------------------------------------------------------------------------------------------------
### API
Accordion has 3 public functions:
- [`AU.accordion.Open( elements, speed )`](#open)
- [`AU.accordion.Close( elements, speed )`](#close)
- [`AU.accordion.Toggle( elements, speed, callbacks )`](#toggle)
#### Open
`AU.accordion.Open( elements, speed )`
The parameters are:
`elements`
The DOM element (not the container you want to open) like a button or a link;
Usually DOM node/s of accordion titles you want to open. They need to have the `aria-controls` attribute that points to the accordion body.
`speed`
Animation speed in milliseconds (optional, defaults to `250ms`)
Example:
```js
AU.accordion.Open( document.getElementById('accordion-title'), 500 );
```
#### Close
`AU.accordion.Close( elements, speed )`
The parameters are:
`elements`
The DOM element (not the container you want to close) like a button or a link;
Usually DOM node/s of accordion titles you want to close. They need to have the `aria-controls` attribute that points to the accordion body.
`speed`
Animation speed in milliseconds (optional, defaults to `250ms`)
Example:
```js
AU.accordion.Close( document.getElementById('accordion-title'), 500 );
```
#### Toggle
`AU.accordion.Toggle( elements, speed, callbacks )`
The parameters are:
`elements`
The DOM element (not the container you want to toggle) like a button or a link;
Usually DOM node/s of accordion titles you want to toggle. They need to have the `aria-controls` attribute that points to the accordion body.
`speed`
Animation speed in milliseconds (optional, defaults to `250ms`)
`callbacks` - An object of four optional callbacks: `{ onOpen, afterOpen, onClose, afterClose }`
Example:
```js
AU.accordion.Toggle( document.getElementById('accordion-title'), 500,
{
onOpen: function() {
console.log('This function will run when an accordion opens');
},
afterOpen: function() {
console.log('This function will run after an accordion has opened');
},
onClose: function() {
console.log('This function will run when an accordion closes');
},
afterClose: function() {
console.log('This function will run after an accordion has closed');
},
}
);
```
**[⬆ back to top](#contents)**
----------------------------------------------------------------------------------------------------------------------------------------------------------------
### React
Usage:
```jsx
import AUaccordion from './accordion.js';
Some content of the first accordion.
Some content of the second accordion.
Some content of the third accordion.
```
All props:
```jsx
{} } {/* A function executed when the accordion opens, optional */}
afterOpen={ () => {} } {/* A function executed after the accordion opened, optional */}
onClose={ () => {} } {/* A function executed when the accordion closes, optional */}
afterClose={ () => {} } {/* A function executed after the accordion opened, optional */}
dark={ false } {/* A dark variation of the component */}
>
Some content for this accordion.
```
_(💡 additional props are spread onto the component)_
For more details have a look at the [usage example](https://github.com/designsystemau/gold-design-system/tree/main/packages/accordion/tests/react/index.js).
**[⬆ back to top](#contents)**
----------------------------------------------------------------------------------------------------------------------------------------------------------------
### jQuery
To initialize the [jQuery](https://jquery.com/) plugin make sure you have jQuery on the page and run the below code after the DOM was loaded:
```js
$(function() {
$('.js-au-accordion-wrapper').AUaccordion();
});
```
You can optionally add functions to each event like so:
```js
$('.js-au-accordion-wrapper').AUaccordion({
onOpen: function() {
console.log('This function will run when an accordion opens');
},
afterOpen: function() {
console.log('This function will run after an accordion has opened');
},
onClose: function() {
console.log('This function will run when an accordion closes');
},
afterClose: function() {
console.log('This function will run after an accordion has closed');
},
});
```
**[⬆ back to top](#contents)**
----------------------------------------------------------------------------------------------------------------------------------------------------------------
## Dependency graph
```shell
/accordion
├─ /animate
└─ /core
```
**[⬆ back to top](#contents)**
----------------------------------------------------------------------------------------------------------------------------------------------------------------
## Tests
The visual test: https://auds.service.gov.au/packages/accordion/tests/site/
**[⬆ back to top](#contents)**
----------------------------------------------------------------------------------------------------------------------------------------------------------------
## Release History
* v7.0.9 - Update core package dependency to use the latest version
* v7.0.8 - Remove --save-dev flag from readme instructions
* v7.0.7 - Removed unused `Fragment` React import
* v7.0.6 - Resolve autoprefixer warning
* v7.0.5 - Fix pancake build path
* v7.0.4 - Updated deprecated `text-decoration-skip` property to `text-decoration-skip-ink`
* v7.0.3 - Remove aria-selected from accordion button
* v7.0.2 - Removed uikit references
* v7.0.1 - Fix issue with parent component re-rendering causing accordion to open and close
* v7.0.0 - Changed accordion title element to use `