accordion
v3.0.2
Published
Silky-smooth accordion widgets with no external dependencies.
Downloads
6,535
Maintainers
alhadisReadme
The old `accordion.js` file contains only ES5, and can be used as a fallback for older platforms which lack ES module support:
~~~html
<!-- Fallback to ES5 for legacy browsers -->
<script nomodule src="src/accordion.js"></script>
<script nomodule>
"use strict";
var accordions = document.querySelectorAll(".accordion");
for(var i = 0, l = accordions.length; i < l; ++i)
new Accordion(accordions[i]);
</script>IE8 support
For IE8-9 compatibility, install fix-ie:
npm install fix-ie --save
bower install fix-ie --saveThen link to it using a conditional comment, before any other script on the page!
<!DOCTYPE html>
<html lang="en">
<head>
<!--[if lte IE 9]>
<script src="node_modules/fix-ie/dist/ie.lteIE9.js"></script>
<![endif]-->
<meta charset="utf-8" />This fixes IE's buggy handling of Object.defineProperty, which the Accordion makes extensive use of. fix-ie also provides oodles of helpful polyfills to fix IE8's shoddy DOM support.
Options
| Name | Type | Default | Description |
|--------------------------------------------------|----------|------------------|-----------------------------------------------------------------|
| closeClass | String | "closed" | CSS class used to mark a fold as closed |
| disabled | Boolean | false | Whether to disable the accordion on creation |
| disabledClass | String | undefined | CSS class marking an accordion as disabled |
| edgeClass | String | "edge-visible" | CSS class toggled based on whether the bottom-edge is visible |
| enabledClass | String | "accordion" | CSS class marking an accordion as enabled |
| heightOffset | Number | 0 | Distance to offset each fold by |
| modal | Boolean | false | Whether to close the current fold when opening another |
| noAria | Boolean | false | Disable the addition and management of ARIA attributes |
| noKeys | Boolean | false | Disable keyboard navigation |
| noTransforms | Boolean | false | Disable CSS transforms; positioning will be used instead |
| onToggle | Function | undefined | Callback executed when opening or closing a fold |
| openClass | String | "open" | CSS class controlling each fold's "open" state |
| snapClass | String | "snap" | CSS class for disabling transitions between window resizes |
| useBorders | Boolean | "auto" | Consider borders when calculating fold heights |