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.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
test
.editorconfig
.gitignore
.travis.yml
LICENSE First version Aug 25, 2017
Makefile
README.md
a11y-accordion-tabs.js Add new option `startCollapsed` Dec 13, 2018
a11y-accordion-tabs.min.js Add new option `startCollapsed` Dec 13, 2018
package-lock.json
package.json

README.md

a11y-accordion-tabs

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.

Demo

See it in action here.

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:

<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="accordeon-trigger js-accordeon-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="accordeon-trigger js-accordeon-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="accordeon-trigger js-accordeon-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);

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:

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 |

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 Matthias Ott

You can’t perform that action at this time.