The tabs plugin for jQuery
The jquery-accessible-tabs-aria is a free plug-in which is based on jQuery for creating tabular content in your web pages. The plugin is tiny in size but has many useful features including keyboard navigation support. Even if the JS file of the plugin is not loaded for some reason at user’s end, the content will be presented nicely, so it does not look cluttered or unorganized.
The plugin file size for distribution is only 4Kb (minified version) while IKb of gzipped and minified.
An example of displaying tabs content
In this example, five tabs are created with content in it. Once inside the content of a tab, use the arrow keys (up, down etc.) to navigate by using the keyboard. Also, note the tabs plugin is responsive. In smaller screen, tabs become panels. So, if any panel is selected, it will open the respective content. See the demo and code by clicking the links below:
See online demo and code
To make this tab plug-in working, simply include the jQuery and plug-in JS file in the <head> section along with plug-in’s CSS file. You may either download it from the GitHub website here or view source the demo page and find the styles_20120909.css and jquery-accessible-tabs_1460900940.js files, save it to your system and store in the assets or JS/CSS folders of your web project.
The markup section involves creating a div that contains <ul>, <li> and <a> tags for creating the tabs, for example:
<div class="js-tabs tabs__standard"> <ul class="js-tablist tabs__standard_ul" data-hx="h2"> <li class="js-tablist__item tabs__standard__li"> <a href="#jQuery" id="label_robust_accessible" class="js-tablist__link tabs__standard__a">jQuery</a> </li>
Get the complete code in the demo page.