Lightweight Accessible Tabs Plugin For jQuery - Suntabs

Suntabs is a super tiny (~2kb minified) jQuery plugin that generate an efficient and accessible tabs component from plain html. 

Key features:

• Progressive enhancement is used to automatically build the tabs for each set of panels.
• Ids will automatically be generated if the panels don't have any.
• Accessibility features such as aria roles and states are included.
• Tabs and panels are styled with CSS.
• Note that you may only have one set of classes (settings) per page or else you will lose functionality.

How to use it:

1. Create a set of tabbed panels as follow.

<div class="panels" id="demo">
  <div>
      <h3 class="suntab-title">Panel 1</h3>
      <p>Ipsum ratione, itaque, totam, neque architecto officiis vel velit eveniet deserunt consequuntur facilis consectetur harum facere nemo excepturi. Blanditiis sed veritatis aperiam.</p>
  </div>
  <div id="demo-tab2">
      <h3 class="suntab-title">Panel 2</h3>
      <p>Laborum, fugit. Voluptatem quas voluptas dolor minima, illum nulla accusamus omnis voluptatum a, placeat nihil rerum error molestiae libero harum sed sunt.</p>
  </div>
</div>

2. Include jQuery library and the jQuery Suntabs plugin at the end of the document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.suntabs.js"></script>

3. Initialize the plugin.

$('#demo').suntabs();

4. Style the tabs component with your own CSS rules.

.suntabs {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 0.9em;
  line-height: 26px;
}

.suntabs li { display: inline-block; }

.suntabs a {
  border: 1px solid #ccc;
  border-width: 1px 1px 0 1px;
  margin-right: 2px;
  text-decoration: none;
  padding: 6px 16px;
  border-radius: 3px 3px 0 0;
  color: #555;
  background-color: #ccc;
  box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.2);
}

.suntabs a:hover, .suntabs a:focus, .suntabs .active a {
  color: #222;
  background-color: white;
  box-shadow: none;
}

.panels.suntabbed {
  border: 1px solid #ccc;
  margin: 0;
  padding: 0 1em;
}

.panels.suntabbed h3 { display: none; }

5. Plugin's default settings.

// selector to find the tab titles
headerSelector:     '.suntab-title',  

// class applied to the pane(s) after processing
processedClass:     'suntabbed', 

// class applied to the active tab     
tabActiveClass:     'active',         

// class applied to the tabs container(s)
tabsContainerClass: 'suntabs',        

// class applied to the tab elements
tabTriggerClass:    'suntab-tab'      

---

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