Skip to content
A script for an accessible accordion tabs component
JavaScript Makefile
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE First version Aug 25, 2017
a11y-accordion-tabs.js Add new option `startCollapsed` Dec 13, 2018
a11y-accordion-tabs.min.js Add new option `startCollapsed` Dec 13, 2018


npm version Build Status devDependency Status

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.


See it in action here.


Download or clone

Download the latest version or git clone


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>
  <section id="section1" role="tabpanel" aria-labelledby="tab1" class="tabs-panel js-tabs-panel" tabindex="0">
    <div class="accordeon-trigger js-accordeon-trigger" aria-controls="section1" aria-expanded="true" tabindex="0">Section 1</div>
    <div class="content" aria-hidden="false">
  <section id="section2" role="tabpanel" aria-labelledby="tab2" class="tabs-panel js-tabs-panel">
    <div class="accordeon-trigger js-accordeon-trigger" aria-controls="section2" aria-expanded="false" tabindex="0">Section 2</div>
    <div class="content" aria-hidden="true">
  <section id="section3" role="tabpanel" aria-labelledby="tab3" class="tabs-panel js-tabs-panel">
    <div class="accordeon-trigger js-accordeon-trigger" aria-controls="section3" aria-expanded="false" tabindex="0">Section 3</div>
    <div class="content" aria-hidden="true">

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

Copyright (c) 2017 Matthias Ott

You can’t perform that action at this time.