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 );

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:

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:

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:

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.

⬆ 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:

$(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');
  },
});

⬆ back to top

Dependency graph

/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 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 <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

⬆ back to top

License

⬆ back to top

};

Keywords

FAQs

What is @gold.au/accordion?

Is @gold.au/accordion well maintained?

Package last updated on 19 Sep 2021

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.

Install

@gold.au/accordion