Dead Simple Responsive Tabs Plugin For jQuery - minimalTabs.js

The minimalTabs.js jQuery plugin helps you helps you create a semantic, responsive tabs interface with support for keyboard navigation and dynamic resizing.

How to use it:

1. To get started, include the stylesheet jquery.minimalTabs.css and JavaScript jquery.minimalTabs.js on the webpage.

<link rel="stylesheet" href="jquery.minimalTabs.css">
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.minimalTabs.js"></script>

2. The html structure for the tabs & tab contents.

<div id="example" class="tabs-container">
  <p class="tabs">
    <a href="#Tab1" id="TabTitle1">Tab one</a>
    <a href="#Tab2" id="TabTitle2">Tab two</a>
    <a href="#Tab3" id="TabTitle3">Tab three</a>
  </p>
  <ul class="tabs-content">
    <li id="Tab1" class="tab-content">
      <p>Content of first tab.</p>
    </li>
    <li id="Tab2" class="tab-content">
      <p>Content of second tab.</p>
    </li>
    <li id="Tab3" class="tab-content">
      <p>Content of third tab.</p>
    </li>
  </ul>
</div>

3. Initialize the plugin and done.

$("#example").minimalTabs();

---

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