Responsive Accessible Tabs Plugin For jQuery - aria-tabs

aria-tabs is a lightweight jQuery plugin which helps you create a responsive, accessible tabs interface from plain HTML, with support for Aria attributes/roles and keyboard interactions.

How to use it:

1. Load the styelsheet aria-tabs.css to provide the default CSS styles for the tabs interface.

<link rel="stylesheet" href="aria-tabs.css">

2. Create the tab navigation and tabbed panels following the html structure as this:

<div class="tab-group">
  <nav class="tab-group__tab-nav">
    <ul class="tab-group__tab-ul">
      <li class="tab-group__tab-li">
        <button type="button" class="tab-group__tab-btn">Tab 1</button>
      </li>
      <li class="tab-group__tab-li">
        <button type="button" class="tab-group__tab-btn">Tab 2</button>
      </li>
      <li class="tab-group__tab-li">
        <button type="button" class="tab-group__tab-btn">Tab 3</button>
      </li>
    </ul>
  </nav>
  <div class="tabs-group__tabs-cont">
    <div class="tab-group__tabpanel">
      <div class="tab-group__tab-content">
        <h3>TAB 1</h3>
      </div>
    </div>
    <div class="tab-group__tabpanel">
      <div class="tab-group__tab-content">
        <h3>TAB 2</h3>
      </div>
    </div>
    <div class="tab-group__tabpanel">
      <div class="tab-group__tab-content">
        <h3>TAB 3</h3>
      </div>
    </div>
  </div>
</div>

3. Load jQuery JavaScript library and the JavaScript aria-tabs.js at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="aria-tabs.js"></script>

4. That's it. The plugin will automatically initialize the tabs interface on document ready. Here's a list of default settings which can be used to customize the tabs interface.

$('.tab-group').ariaTabs({

  // Default CSS classes
  tabGroupIdPrefix: 'tab-group--',
  navClass: 'tab-group__tab-nav',
  listClass: 'tab-group__tab-ul',
  listItemClass: 'tab-group__tab-li',
  btnClass: 'tab-group__tab-btn',
  panelsContainerClass: 'tab-group__tabs-cont',
  panelClass: 'tab-group__tabpanel',
  contentClass: 'tab-group__tab-content',
  contentRole: 'document',
  btnSelectedClass: 'tab-group__tab-btn_selected',
  panelSelectedClass: 'tab-group__tabpanel_selected',

  // Enable vertical mode
  verticalMode: false,

  // Fade animation speed in milliseconds
  fadeSpeed: 300,
    
  // Enable CSS transitions
  cssTransitions: false

});

Change log:

2018-01-15

• v2.0.0

---

This awesome jQuery plugin is developed by DavideTriso. For more Advanced Usages, please check the demo page or visit the official website.