https://github.com/webfactory/accordion
A JS plugin for accessible accordions
https://github.com/webfactory/accordion
a11y accesibility accessible-accordions accordion accordion-plugin accordions
Last synced: 9 months ago
JSON representation
A JS plugin for accessible accordions
- Host: GitHub
- URL: https://github.com/webfactory/accordion
- Owner: webfactory
- License: mit
- Created: 2017-12-08T16:34:15.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-06-07T10:27:52.000Z (over 1 year ago)
- Last Synced: 2025-03-07T14:06:03.893Z (10 months ago)
- Topics: a11y, accesibility, accessible-accordions, accordion, accordion-plugin, accordions
- Language: JavaScript
- Homepage:
- Size: 53.7 KB
- Stars: 0
- Watchers: 4
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# wfAccordion
A tiny script that _progressively enhances_ static HTML with accessible and keyboard-enabled accordion functionality.
⚠️ **Please note:**
- v4.0.0 and above have dropped jQuery and no longer support Internet Explorer.
- v2.0.0 and above require a wrapping element around any group of consecutive accordions.
## Usage
Required HTML structure:
```
Title
Text
```
You can use `dist/wf.accordion.min.js` which will auto-initiate all accordions on page load if you follow the HTML structure shown above. If you want more fine-grained control, you can
use ES Module `import` directly from `src/accordion.js`. You will need Webpack or similar to produce a bundle for production.
### Examples:
HTML:
```
```
ES Module import as-is:
```
import 'webfactory-accordion/dist/wf.accordion.min';
```
ES Module import with custom settings:
```
import { wfaccordionsInit } from 'webfactory-accordion/src/accordion';
wfaccordionsInit({
accordionGroup: '.my-fancy-accordion-group-js-hook',
});
```
## Settings
Option | Type | Default | Description
------ | ---- | ------- | -----------
accordionGroup | string | '.js-accordion-group' | Class hook for the accordion wrapper. This is the hook you initiate the script with (see example above).
accordionRoot | string | '.js-accordion' | Class hook for the accordion. This is the internal hook used to find invidual accordions inside groups.
accordionHeader | string | '.js-accordion__header' | Class hook for the accordion header container.
accordionTrigger | string | '.js-accordion__trigger' | Class hook for the accordion title (a child of the header container). This element is transformed to a `` by the plugin for accessibility reasons.
accordionPanel | string | '.js-accordion__panel' | Class hook for the accordion panel. This element is typically hidden by the plugin until the accordion is opened by the user.
disableHashUpdate | boolean | false | Disables the automated hash update when triggering an accordion.
### Notes:
- The accordion trigger can be any element (e.g. `
`); you only need to be aware that a `` will be inserted into this element
by the plugin and that all attributes of the trigger element will be moved to the ``. The visual design
should therefore depend on a class and not on the element!
- The names of CSS- and JS-hook-classes are completely customizable, you only need to pass the latter (`.js-*`) to the
plugin via options if they differ from the defaults
- You can set any accordion to be expanded on initialization by applying the data attribute `data-wf-accordion-expanded` to the accordion container.
- You can set any accordion to be disabled by applying the data attribute `data-wf-accordion-disabled` to the accordion container.
### Keyboard support:
- All interactive elements observe normal tab ⇥ order (accordion triggers are focussable, open panels allow focussing of links inside themselves)
- Once an accordion receives focus, you can cycle through all accordions on the page with the arrow keys ↑↓
- You can navigate to the first or last accordion on the page with Page Up ↖ or Page Down ↘ respectively.
- Accordion triggers support Space and Enter ↵ keys for toggling of accordions.
## Credits, Copyright and License
This bundle was started at webfactory GmbH, Bonn.
-
-
Copyright 2019-2023 webfactory GmbH, Bonn. Code released under [the MIT license](LICENSE).