@gov.au/accordion
============
Allow the user to toggle the visibility of an element
Contents
----------------------------------------------------------------------------------------------------------------------------------------------------------------Install
```shell yarn add @gov.au/accordion ``` ```shell npm install @gov.au/accordion ``` ā¬ back to top ----------------------------------------------------------------------------------------------------------------------------------------------------------------Usage
ā¬ back to top ----------------------------------------------------------------------------------------------------------------------------------------------------------------API
Accordion has 3 public functions: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
----------------------------------------------------------------------------------------------------------------------------------------------------------------
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 The headline of the accordion /} closed={ true } {/ Closed state, optional /} speed={ 250 } {/ Speed of the animation in ms, optional /} onOpen={ () => {} } {/ 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. ā¬ back to top ----------------------------------------------------------------------------------------------------------------------------------------------------------------
jQuery
To initialize the jQuery 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
----------------------------------------------------------------------------------------------------------------------------------------------------------------
Dependency graph
```shell accordion āā animate āā core ``` ā¬ back to top ----------------------------------------------------------------------------------------------------------------------------------------------------------------Tests
The visual test: https://auds.service.gov.au/packages/accordion/tests/site/ ā¬ back to top ----------------------------------------------------------------------------------------------------------------------------------------------------------------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 totext-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
<button>
instead of<a>
- v6.0.1 - Fix issues with state not firing
- v6.0.0 - Add accordion group in a unordered list, remove
role="tab"
- v5.0.2 - Update dependencies
- v5.0.1 - Removing web pack dev server, updating dependencies
- v5.0.0 - Removing unecessary aria-hidden as css display toggles screen reader ability
- v4.0.0 - State change more specific, remove style set on html, componentDidUpdate, build scripts for Windows
- v3.0.5 - Replace node-sass with sass
- v3.0.4 - Change npm run watch browser-sync location
- v3.0.3 - au-body--dark now changes accordion title colour
- v3.0.2 - Update dependencies
- v3.0.1 - Updating documentation
- v3.0.0 - React accordion open by default
- v2.0.3 - Update homepage link
- v2.0.2 - Fix issue with scope inside AU.animate.Run
- v2.0.1 - Fix dependencies
- v2.0.0 - Change to focus colour and border/muted color mix
- v1.0.1 - IE8 spacing above triangle fixed 309
- v1.0.0 - Moved to AU namespace, added new color themes and spacing
- v0.3.0 - Added pancake-react plugin, ES5 main file
- v0.2.0 - Added react and jQuery component
- v0.1.0 - š„ Initial version
License
Copyright (c) Commonwealth of Australia. Licensed under MIT. ā¬ back to top};