Simple Responsive Tabs Plugin For jQuery - SimpleTabs

SimpleTabs is a simple, flexible and responsive jQuery & CSS3 tabs plugin which allows the visitor to swap between tabbed content with a slide effect.

How to use it:

1. Place the jQuery simpleTabs plugin after jQuery library as usual.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="SimpleTabs.js"></script>

2. Create tabs & tabbed panels as follow.

<div class="tabBlock">

  <ul class="tabBlock-tabs">
    <li class="tabBlock-tab is-active">Tab 1</li>
    <li class="tabBlock-tab">Tab 2</li>
    <li class="tabBlock-tab">Tab 3</li>
  </ul>
  
  <div class="tabBlock-content">
    <div class="tabBlock-pane">
      <p> Panel 1 </p>
    </div>
    <div class="tabBlock-pane">
      <p> Panel 2 </p>
    </div>
    <div class="tabBlock-pane">
      <p> Panel 3 </p>
    </div>
  </div>
  
</div>

3. The CSS to style the SimpleTabs plugin.

.tabBlock-tabs::after {
  clear: both;
  content: "";
  display: table;
}

.tabBlock { margin: 0 0 2.5rem; }

.tabBlock-tab {
  background-color: white;
  border-color: #d8d8d8;
  border-left-style: solid;
  border-top: solid;
  border-width: 2px;
  color: #b5a8c5;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  float: left;
  padding: 0.625rem 1.25rem;
  position: relative;
  transition: 0.1s ease-in-out;
}

.tabBlock-tab:last-of-type { border-right-style: solid; }

.tabBlock-tab::before,
.tabBlock-tab::after {
  content: "";
  display: block;
  height: 4px;
  position: absolute;
  transition: 0.1s ease-in-out;
}

.tabBlock-tab::before {
  background-color: #b5a8c5;
  left: -2px;
  right: -2px;
  top: -2px;
}

.tabBlock-tab::after {
  background-color: transparent;
  bottom: -2px;
  left: 0;
  right: 0;
}

.tabBlock-tab.is-active {
  position: relative;
  color: #975997;
  z-index: 1;
}

.tabBlock-tab.is-active::before { background-color: #975997; }

.tabBlock-tab.is-active::after { background-color: white; }

.tabBlock-content {
  background-color: white;
  border: 2px solid #d8d8d8;
  padding: 1.25rem;
}

.tabBlock-pane > :last-child { margin-bottom: 0; }

---

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