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+
