Basic Responsive Tabbed Content Plugin with jQuery - BasicTabs

Basic Responsive Tabbed Content Plugin with jQuery - BasicTabs
File Size: 11.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

});

Change log:

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.