Responsive & Accessible Tabs with Pure JavaScript

Preview:

Description:

A pure native JavaScript library that intends to create a responsive, accessible tabbed interface with ARIA & keyboard support.

How to use it:

Load the tabs.js script at the end of the document.

<script src="path/to/tabs.js"></script>

Create tab navigation & panels as follow:

<div class="tabs">
  <ul class="tabs__list">
    <li><a>Tab 1</a></li>
    <li><a>Tab 2</a></li>
    <li><a>Tab 3</a></li>
  </ul>
  <div class="tabs__tab-content">
    <h2>Tab 1</h2>
    <p>Content 1</p>
  </div>
  <div class="tabs__tab-content">
    <h2>Tab 2</h2>
    <p>Content 2</p>
  </div>
  <div class="tabs__tab-content">
    <h2>Tab 3</h2>
    <p>Content 3</p>
  </div>
</div>

Add your own CSS to style the tabbed interface.

[role="tablist"] {
margin:0;
float:left;
width:100%
}
[role="presentation"] {
display:inline-block;
float:left;
list-style:none
}
[role="tab"] {
padding:10px;
float:left
}
[role="tab"][aria-selected="true"], [role="tab"]:focus {
background-color:#f4f4f4
}
[role="tabpanel"][aria-hidden="false"] {
padding:10px;
float:left;
width:100%;
border:1px solid #eee
}
[role="tabpanel"][aria-hidden="true"] {
display:none
}

Initialization.

Tabs.init();