Basic Responsive Tabbed Content Plugin with jQuery - BasicTabs

BasicTabs is an ultra-light jQuery tabs plugin for creating responsive tabbed content panels that are fully customizable via CSS styles.

How to use it:

1. Import jQuery library and the jQuery BasicTabs plugin into your Html page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/basicTabs-min.js"></script>

2. The Html structure to create tabbed navigation & content panels.

<ul class="c-tabs">
  <li class="c-tabs__item">
    <a href="javascript:void(0)" class="c-tabs__link">Tab Item</a>
    <div class="c-tabs__content">
      <p>Tabbed Content 1</p>
    </div>
  </li>
  <li class="c-tabs__item">
    <a href="javascript:void(0)" class="c-tabs__link">Tab Item</a>
    <div class="c-tabs__content">
      <p>Tabbed Content 2</p>
    </div>
  </li>
  <li class="c-tabs__item">
    <a href="javascript:void(0)" class="c-tabs__link">Tab Item</a>
    <div class="c-tabs__content">
      <p>Tabbed Content 3</p>
    </div>
  </li>
</ul>

3. Initialize the tabs plugin with one JS call.

$('#tabwrap').basicTabs();

4. Style the tabs plugin whatever you like.

.c-tabs__item { display: inline; }

.c-tabs__link {
  display: inline-block;
  color: #999;
  text-decoration: none;
  padding: 1rem 1.5rem;
}

.c-tabs__link.is-active { color: #333; }

.c-tabs__content {
  display: none;
  width: 100%;
  float: left;
  padding: 0 1.5rem 1.5rem 1.5rem;
}
 @media only screen and (max-width: 640px) {

.c-tabs__link { display: block; }
}

.c-tabs {
  background: #fff;
  overflow: hidden;
}

5. Default settings.

$('#tabwrap').basicTabs({

// CSS classes
active_class: "is-active",
open_class: "is-open",
list_class: "c-tabs",

// initial tab
starting_tab: 1

});

Changelog:

2015-09-23

• Auto convert between tabbed interface and accordion interface according to the screen width.

---

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