accordion
Accessible accordion using CSS transition to expand and contract. Aria states are automatically added.
To get Started
CommonJS
$ npm install c2-accordion
var Accordion = ;
Browser Global
Basic Example
... ... ... ... ... ...
// This wouldn't be necessary since all these options are the defaultsvar options = item: '.item' target: '.target' control: '.target' // in this case the target is also acting as the control panel: '.panel' allowMultiple: true attribute: 'data-status' expanded: 'expanded' contracted: 'contracted' prefix: 'Accordion-' transition: 'height .3s' transitionSupport: true setFocus: 'none' // options: none, item, panel, target, control, first hashEnabled: false // use hash in URL to open accordion item; '.Accordion' options;
Since the height of the "control" and the height of the "panel" make up the height of the item. It is sometimes not the case that the "target" is the same as the "control". Below is an example of this:
... ... ... ... ... ...
'.Accordion' control: '.control';
Example with Hashes
Add the attribute "data-hash" to each item on the accordion.
... ... ... ... ... ...
'.Accordion' hashEnabled: true;
API
var accordion = '.Accordion'; accordion; // toggles accordion to the indexaccordion; // expands accordion to the indexaccordion; // contracts accordion to the indexaccordion; // contracts all the accordions, the optional parameter is an index that gets ignoredaccordion // removes event listeners and aria properties
Accessibility
http://www.w3.org/TR/wai-aria-practices/#accordion
Here is what the markup looks like after accessibility is added with JavaScript. It may be beneficial to add the aria attributes before JavaScript runs.
... ... ... ... ... ...
Or if allowMultiple
is set to false
.
... ... ... ... ... ...
License
MIT © The C2 Group