Repository files navigation

A tiny script thatprogressively enhances static HTML with accessible and keyboard-enabled accordion functionality.

⚠️Please note:

• Depending on your requirements and browser support matrix, thenative HTML<details> element may be sufficient for your accordion use case.
• 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.

Required HTML structure:

<div>    <div>        <div>            <div>Title</div>        </div>        <div>Text</div>    </div></div>

You can usedist/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 canuse ES Moduleimport directly fromsrc/accordion.js. You will need Webpack or similar to produce a bundle for production.

HTML:

<script src="path/to/node_modules/webfactory-accordion/dist/wf.accordion.min.js" defer></script>

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

• The accordion trigger can be any element (e.g.<h2>); you only need to be aware that a<button> will be inserted into this elementby the plugin and that all attributes of the trigger element will be moved to the<button>. The visual designshould 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 theplugin via options if they differ from the defaults
• You can set any accordion to be expanded on initialization by applying the data attributedata-wf-accordion-expanded to the accordion container.
• You can set any accordion to be disabled by applying the data attributedata-wf-accordion-disabled to the accordion container.

• 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.

This bundle was started at webfactory GmbH, Bonn.

• https://www.webfactory.de
• https://twitter.com/webfactory

Copyright 2019-2023 webfactory GmbH, Bonn. Code released underthe MIT license.