Responsive & Accessible Tabs with Pure JavaScript

Category: Javascript | April 13, 2015
Author:oliverfarrell
Views Total:2,155 views
Official Page:Go to website
Last Update:April 13, 2015
License:MIT

Preview:

Responsive & Accessible Tabs with Pure JavaScript

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();

You Might Be Interested In:


One thought on “Responsive & Accessible Tabs with Pure JavaScript

  1. Ali Hakimov

    For some reason this does not want to work. Does instruction
    ‘How to use it’ comprehensive? I mean the example pasted just the way described above doesn’t function

    Tabs.init();

    Moreover, firebug shows the demo page contains tags with some more attributes which instruction above lacks. Please someone give some clue to dummy user 🙂

    Reply

Leave a Reply