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 the latest version or git clone https://github.com/matthiasott/a11y-accordion-tabs.git
.
npm install a11y-accordion-tabs --save-dev
First, include a11y-accordion-tabs.js
(or the minified version) in your document:
<script src="a11y-accordion-tabs.js" async></script>
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.
<link rel="stylesheet" href="styles.css" />
The basic HTML structure for the accordion tabs component reads as follows:
<div class="accordion-tabs js-tabs">
<ul role="tablist" class="tabs-tab-list">
<li role="presentation"><a href="#section1" role="tab" id="tab1" aria-controls="section1" aria-selected="true" class="tabs-trigger js-tabs-trigger">Section 1</a></li>
<li role="presentation"><a href="#section2" role="tab" id="tab2" aria-controls="section2" class="tabs-trigger js-tabs-trigger">Section 2</a></li>
<li role="presentation"><a href="#section3" role="tab" id="tab3" aria-controls="section3" class="tabs-trigger js-tabs-trigger">Section 3</a></li>
</ul>
<section id="section1" role="tabpanel" aria-labelledby="tab1" class="tabs-panel js-tabs-panel" tabindex="0">
<div class="accordion-trigger js-accordion-trigger" aria-controls="section1" aria-expanded="true" tabindex="0">Section 1</div>
<div class="content" aria-hidden="false">
abc
</div>
</section>
<section id="section2" role="tabpanel" aria-labelledby="tab2" class="tabs-panel js-tabs-panel">
<div class="accordion-trigger js-accordion-trigger" aria-controls="section2" aria-expanded="false" tabindex="0">Section 2</div>
<div class="content" aria-hidden="true">
def
</div>
</section>
<section id="section3" role="tabpanel" aria-labelledby="tab3" class="tabs-panel js-tabs-panel">
<div class="accordion-trigger js-accordion-trigger" aria-controls="section3" aria-expanded="false" tabindex="0">Section 3</div>
<div class="content" aria-hidden="true">
def
</div>
</section>
</div>
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.getElementById("myTabs");
new AccordionTabs(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:
new AccordionTabs(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 |
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
.
- 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.
Matthias Ott
[email protected]
https://matthiasott.com
https://twitter.com/m_ott
Copyright (c) 2017–2020 Matthias Ott