It’s accessible

It loves keyboards

Keyboard navigation is supported too, here are the shortcuts: (Left and Right are inverted on RTL websites)

If you focus on the accordion “buttons”:

use Up/Left to put focus on previous accordion button,

use Down/Right to put focus on next accordion button

use Home to put focus on first accordion button (wherever you are in accordion buttons)

use End to put focus on last accordion button (wherever you are in accordion buttons)

And strike space or return on an accordion button to open/close it.

If you focus on accordion content:

use CtrlUp to set focus on the accordion button for the currently displayed accordion content

use CtrlPageUp to set focus on the previous accordion button for the currently displayed accordion content

use CtrlPageDown to set focus on the next accordion button for the currently displayed accordion content

Warning: Ctrl+PageUp/PageDown combination could activate for some browsers a switch of browser tabs. Nothing to do for this, as far as I know (if you have a solution, let me know).

It’s lightweight and free

Lightweight

Its weight is only:

12kb (development, readable by humans);

4.4kb (minified, readable by machines);

1.3kb minified and gzipped (readable by… mutants‽‽)

Free

No license problem: it uses MIT license, so it’s free, open-source and you can do whatever you want with it, including commercial use. This permission notice shall be included in all copies or substantial portions of it.

However, it is not prohibited to tell me that you’ve used it, or send me a little “thank you”. ;)

Will call the plugin and generate buttons keeping HTML content in the Hx.

How to style it (nicely)

In this example page, I’ve used data-accordion-prefix-classes="minimalist-accordion", so all the generated classes will start with .minimalist-accordion (.minimalist-accordion__header, .minimalist-accordion__panel and .minimalist-accordion__title).

Multi-selectable or not?

The ARIA Design Pattern for accordions allows to have several accordion panels opened at the same time (which is shown by the attribute aria-multiselectable="true"). However, you might need to avoid this for design purposes or client request. To do this, you may set this attribute on the accordion container: data-accordion-multiselectable="none". Example:

<div class="js-accordion" data-accordion-multiselectable="none" …>

This option will set up aria-multiselectable="false" and the plugin will allow only one panel to be opened at the same time.

Other options

Even if you may set up option in the call of the plugin, you may use some data-* attributes to specify options (for compatibility and historical reasons). data-accordion-prefix-classes will have the same result as option prefixClass. Same for data-accordion-button-generated-content, will set up buttonsGeneratedContent.

Older updates

20th of April, 2017: fixed an issue when missing ids on accordion wrapper, reported by @Spone and @joosebox.