translate

accessible-tabs


Vanilla JavaScript Accessible Tabs

Code Climate Build Status Inline docs

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+

Rating

ABOUT

LESS COMMENTS

MESSAGE REVIEW OK

Ok