Vanilla JavaScript Accessible Tabs

This JavaScript plugin provides accessible tab functionality and adds ARIA attributes to markup. Check out the demo at http://codepen.io/oliverfarrell/pen/VYoXJj

Roadmap

• Add an option to convert tabs to an accordion for mobile devices. Will need an additional option for specifiying the media query.

Usage

Include the script and initialise the tabs library.

<script src="tabs.min.js"></script>
<script>
  Tabs.init();
</script>

Then add the tabs markup.

<div class="tabs">
  <ul>
    <li><a>Tab 1</a></li>
    <li><a>Tab 2</a></li>
    <li><a>Tab 3</a></li>
  </ul>
  <div>
    <h2>Tab 1</h2>
    <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum.</p>
  </div>
  <div>
    <h2>Tab 2</h2>
    <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum.</p>
  </div>
  <div>
    <h2>Tab 3</h2>
    <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum.</p>
  </div>
</div>

Brower Support

• Chrome
• Firefox
• Safari
• Opera
• IE 8+