webfactory-accordion

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:

<div class="wf-accordion-group js-accordion-group">
    <div class="wf-accordion js-accordion">
        <div class="wf-accordion__header js-accordion__header">
            <div class="wf-accordion__trigger js-accordion-trigger">Title</div>
        </div>
        <div class="wf-accordion__panel js-accordion__panel">Text</div>
    </div>
</div>

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:

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

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 <button> 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. <h2>); you only need to be aware that a <button> will be inserted into this element by the plugin and that all attributes of the trigger element will be moved to the <button>. 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.

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

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