Simple Responsive jQuery Tabbed Interface Plugin - Tabs

Just another jQuery solution used to create a fully responsive, mobile-friendly tabbed interface where the tabs automatically become a select dropdown menu on small screen devices. Integrated with Animate.css to provide more than 70+ cool CSS3 animations as you switch between tabbed panels.

Basic usage:

1. Include the Animate.css for CSS3 animations.

<link rel="stylesheet" href="/path/to/animate.min.css">

2. Create tabs and tabbed panels following the markup structure like this:

<div class="tabs-wrapper">
  <ul class="tab-nav">
    <li class="active">
      <a href="#" data-target="tab-1">Tab 1</a>
    </li>
    <li>
      <a href="#" data-target="tab-2">Tab 2</a>
    </li>
    <li>
      <a href="#" data-target="tab-3">Tab 3</a>
    </li>
  </ul>
  <div class="target-tabs">
    <div id="tab-1" class="tab-content">
      <span class="tab-heading"><span class="tab-no">Tab 1</span></span>
      <p>Content 1</p>
    </div>
    <div id="tab-2" class="tab-content">
      <span class="tab-heading"><span class="tab-no">Tab 2</span></span>
      <p>Content 2</p>
    </div>
    <div id="tab-3" class="tab-content">
      <span class="tab-heading"><span class="tab-no">Tab 3</span></span>
      <p>Content 3</p>
    </div>
  </div>
</div>

3. The required CSS styles. Add the following CSS snippets into you CSS file.

.tabs-wrapper { overflow: hidden; }

.tabs-wrapper .tab-content a:hover { text-decoration: underline; }

.tabs-wrapper .tab-content ul {
  margin: 0;
  padding-left: 20px;
  list-style: square;
}

.tabs-wrapper .tab-content ul li { margin-bottom: 5px; }

.animated {
  -webkit-animation-duration: 150ms;
  animation-duration: 150ms;
}

.tabs-wrapper {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.tabs-wrapper select.tab-nav { display: none; }

.tabs-wrapper ul.tab-nav {
  list-style: none;
  display: block;
  border-bottom: 1px solid #DEDEDE;
  margin: 0px;
  padding: 0px 30px;
}

.tabs-wrapper ul.tab-nav li {
  display: inline-block;
  margin-right: 5px;
}

.tabs-wrapper ul.tab-nav li a {
  text-decoration: none;
  color: #007FD3;
  padding: 12px 20px;
  border: 1px solid #DEDEDE;
  border-bottom-width: 1px solid transparent;
  display: block;
  border-radius: 2px 2px 0px 0px;
  margin-bottom: -1px;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.tabs-wrapper ul.tab-nav li.active a {
  border-bottom: 1px solid #FAFAFA;
  background: #FAFAFA;
}

.tabs-wrapper ul.tab-nav li:hover a { background: #FAFAFA; }

.tabs-wrapper .target-tabs {
  background: #FAFAFA;
  border: 1px solid #DEDEDE;
  border-top-width: 0px;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.tabs-wrapper .target-tabs .tab-content {
  display: none;
  padding: 30px;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.tabs-wrapper .target-tabs .tab-content .tab-heading .tab-no {
  font-size: 28px;
  font-weight: light;
}

.tabs-wrapper .target-tabs .tab-content p {
  line-height: 24px;
  word-spacing: 1px;
}

.tabs-wrapper .target-tabs .tab-content.active { display: block; }

.tabs-wrapper .target-tabs .tab-content.inactive { position: absolute; }

.tabs-wrapper .target-tabs .tab-content a {
  color: #007FD3;
  text-decoration: none;
}

@media screen and (max-width: 640px) {

.tabs-wrapper ul.tab-nav { display: none; }

.tabs-wrapper select.tab-nav {
  width: 100%;
  padding: 15px;
  background: #FFF;
  border: 1px solid #DEDEDE;
  border-radius: 2px 2px 0px 0px;
  display: block;
}

.tabs-wrapper select.tab-nav:focus { outline: none; }

.tabs-wrapper .target-tabs { border-radius: 0px 0px 2px 2px; }

}

4. Load jQuery JavaScript library and the jQuery Tabs plugin at the end of the html document.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/jquery.tabs.js"></script>

5. Initialize the responsive tabs by calling the function on the top container.

$('.tabs-wrapper').tabs();

6. Change the animation types. Reference to https://daneden.github.io/animate.css/ for more animation names.

$('.tabs-wrapper').tabs({
  enterAnimation: 'fadeIn',
  exitAnimation: 'fadeOut'
});

---

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