A small script (less than 1.6 KB compressed and gzipped) with zero dependencies for creating accessible accordion tabs components. Based on the accessible tabs component by @stowball.
The component is an accordion on smaller screens and switches to a tab view on larger viewports.
Download or clone
Download the latest version or
git clone https://github.com/matthiasott/a11y-accordion-tabs.git.
npm install a11y-accordion-tabs --save-dev
a11y-accordion-tabs.js (or the minified version) in your document:
You can write your own styles from scratch or use the CSS file in the docs folder as a starting point and include it in your document, too.
The basic HTML structure for the accordion tabs component reads as follows:
Section 1Section 2Section 3Section 1abcSection 2defSection 3def
For an advanced version have a look at the demo.
By default, the script looks for all elements with the class
js-tabs and turns them into an accordion tabs component automatically.
var tabs = document;tabs;
a11y-accordion-tabs comes with a few options to make the component more flexible. All options can be set via either a
data- attribute or a JS property on the second argument of the constructor:
tabsbreakpoint: 800tabsAllowed: trueselectedTab: 2startCollapsed: false;
| tabsAllowed | Boolean |
true | If
tabsAllowed is set to
false, the component always stays an accordion |
| breakpoint | Number |
640 | Defines the min-width breakpoint where the accordion becomes a tabs component. Make sure to also adjust the CSS accordingly. |
| selectedTab | Number |
0 | Sets the tab that is selected on init |
| startCollapsed | Boolean |
false | Defines if the accordion should be collapsed on startup |
The functions in the script are supported by all modern browsers, including IE10+.
If you need support for IE9, you might want to use this polyfill for
- New option
startCollapsed: Defines if the accordion should be collapsed on startup
- Fix CJS module export – Update dependencies to fix vulnerabilities
- Data attributes now follow the W3C naming conventions (no uppercase letters) – Improved default aria-roles in the demo HTML code – Plus / minus symbols instead of chevrons in the demo code
- Update documentation
- Cleanup example HTML code
- Add support for multiple instances
- Update README with basic documentation
- Breakpoint min-width fix.
- Improved ARIA-roles for the accordion state.
- First basic version. Still a lot of cleanup to do. Please use with caution!
Code released under the MIT license.
Copyright (c) 2017–2020 Matthias Ott