@gov.au/accordion
Advanced tools
Allow the user to toggle the visibility of an element
yarn add @gov.au/accordion
npm install @gov.au/accordion
Accordion has 3 public functions:
AU.accordion.Open( elements, speed )AU.accordion.Close( elements, speed )AU.accordion.Toggle( elements, speed, callbacks )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:
AU.accordion.Open( document.getElementById('accordion-title'), 500 );
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:
AU.accordion.Close( document.getElementById('accordion-title'), 500 );
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:
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');
},
}
);
Usage:
import AUaccordion from './accordion.js';
<AUaccordion header="First headline">
Some content of the first accordion.
</AUaccordion>
<AUaccordion header="Second headline">
Some content of the second accordion.
</AUaccordion>
<AUaccordion header="Third headline">
Some content of the third accordion.
</AUaccordion>
All props:
<AUaccordion
header="Headline" {/* 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.
</AUaccordion>
(💡 additional props are spread onto the component)
For more details have a look at the usage example.
To initialize the jQuery plugin make sure you have jQuery on the page and run the below code after the DOM was loaded:
$(function() {
$('.js-au-accordion-wrapper').AUaccordion();
});
You can optionally add functions to each event like so:
$('.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');
},
});
accordion
├─ animate
└─ core
The visual test: https://auds.service.gov.au/packages/accordion/tests/site/
Fragment React importtext-decoration-skip property to text-decoration-skip-ink<button> instead of <a>role="tab"Copyright (c) Commonwealth of Australia. Licensed under MIT.
FAQs
Allow the user to toggle the visibility of an element
The npm package @gov.au/accordion receives a total of 46 weekly downloads. As such, @gov.au/accordion popularity was classified as not popular.
We found that @gov.au/accordion demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.