a11y-accordion-tabs
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.
Demo
Installation
Download or clone
Download the latest version or git clone https://github.com/matthiasott/a11y-accordion-tabs.git
.
npm
npm install a11y-accordion-tabs --save-dev
Usage
First, include 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 1 Section 2 Section 3 Section 1 abc Section 2 def Section 3 def
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.
But you can also instantiate the component in your JavaScript like this:
var tabs = document; tabs;
Options
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:
tabs breakpoint: 800 tabsAllowed: true selectedTab: 2 startCollapsed: 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 |
Compatibility
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 element.classList
.
Changelog
0.5.0
- New option
startCollapsed
: Defines if the accordion should be collapsed on startup
0.4.1
- Fix CJS module export – Update dependencies to fix vulnerabilities
0.4.0
- 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
0.3.2
- Update documentation
0.3.1
- Cleanup example HTML code
0.3.0
- Add support for multiple instances
- Update README with basic documentation
0.2.1
- Breakpoint min-width fix.
0.2.0
- Improved ARIA-roles for the accordion state.
0.1.0
- First basic version. Still a lot of cleanup to do. Please use with caution!
License
Code released under the MIT license.
Author
Matthias Ott
mail@matthiasott.com
https://matthiasott.com
https://twitter.com/m_ott
Copyright (c) 2017–2020 Matthias Ott