Simple jQuery Plugin For Responsive Tabs - TabDancer

TabDancer is a jQuery responsive tabs plugin that makes lots of tabs fit on one line, hides the ones that don't fit, and reveals them on demand. Shrink your viewport so that the tabs no longer fit on one line. A new 'more' tab will replace the hidden tabs.

How to use it:

1. Include jQuery library together with the jQuery TabDancer plugin's JS and CSS3 file in the html page.

<link rel="stylesheet" href="jquery.tabdancer.css">
  ...
<script src="jquery.min.js"></script>
<script src="jquery.tabdancer.js"></script>

2. Create tabs.

<ul class="tabs js-tabs-responsive" data-more-tabs-text="More">
  <li class="tab-active"><a href="#tab-content-1">Tab One</a></li>
  <li><a href="#tab-content-2">Tab Two</a></li>
  <li><a href="#tab-content-3">Tab Three</a></li>
  <li><a href="#tab-content-4">Tab Four</a></li>
  <li><a href="#tab-content-5">Tab Five</a></li>
  <li><a href="#tab-content-6">Tab Six</a></li>
</ul>

3. Create tabbed panels.

<div class="js-tab-content-container">
  <div class="js-tab-content" id="tab-content-1">
    Tab content 1
  </div>
  <div class="js-tab-content" id="tab-content-2">
    Tab content 2
  </div>
  <div class="js-tab-content" id="tab-content-3">
    Tab content 3
  </div>
  <div class="js-tab-content" id="tab-content-4">
    Tab content 4
  </div>
  <div class="js-tab-content" id="tab-content-5">
    Tab content 5
  </div>
  <div class="js-tab-content" id="tab-content-6">
    Tab content 6
  </div>
</div>

4. Initialize the plugin and done.

$('.js-tabs-responsive').TabDancer();

---

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