Professional Clean Tabbed Content In jQuery

A professional, clean, responsive tabbing system to switch between tabbed content by clicking/tapping on tabs. Written in jQuery and CSS/CSS3.

How to use it:

1. Add tabs and tabbed content to the tabbing system.

• .is-current: Set active tab on page load
• data-tab-list: Unique ID.
• data-tab-info: Tab info

<div class="tab">

  <!-- Tabs -->
  <div class="tab__button">
    <ul class="list">
      <li class="js-tab-trigger item is-current" data-tab-list="tabGroup1" data-tab-info="tab01">
        <button class="button" type="button">Tab 1</button>
      </li>
      <li class="js-tab-trigger item" data-tab-list="tabGroup1" data-tab-info="tab02">
        <button class="button" type="button">Tab 2</button>
      </li>
      <li class="js-tab-trigger item" data-tab-list="tabGroup1" data-tab-info="tab03">
        <button class="button" type="button">Tab 3</button>
      </li>
    </ul>
  </div>

  <!-- Tab Content -->
  <div class="tab__content">
    <div class="js-tab-content content is-current" data-tab-list="tabGroup1" data-tab-info="tab01">
      <h2 class="title">Tab 1</h2>
      <div class="box">
        <div class="imageWrap"><img class="image" src="1.jpg" alt="image alt"></div>
        <p class="text">Tab 1 Content</p>
      </div>
    </div>
    <div class="js-tab-content content" style="display: none;" data-tab-list="tabGroup1" data-tab-info="tab02">
      <<h2 class="title">Tab 2</h2>
      <div class="box">
        <div class="imageWrap"><img class="image" src="2.jpg" alt="image alt"></div>
        <p class="text">Tab 2 Content</p>
      </div>
    </div>
    <div class="js-tab-content content" style="display: none;" data-tab-list="tabGroup1" data-tab-info="tab03">
      <h2 class="title">Tab 3</h2>
      <div class="box">
        <div class="imageWrap"><img class="image" src="3.jpg" alt="image alt"></div>
        <p class="text">Tab 3 Content</p>
      </div>
    </div>
  </div>
  
</div>

2. The necessary CSS styles for the tabbing system.

/* Tab Button */
.tab__button {
  height: 50px;
}
.list {
  display: flex;
  list-style: none;
  height: 100%;
}
.item {
  width: 100%;
  border: 0;
  border-left: 1px solid #ddd;
  height: 100%;
}
.button {
  cursor: pointer;
  appearance: none;
  border-radius: 0;
  border-style: none;
  width: 100%;
  height: 100%;
  border-bottom: 2px solid transparent;
  transition: all .25s ease-in-out;
}
.button:hover {
  font-weight: bold;
  border-bottom: 2px solid #31a0ca;
}
.button:focus {
  outline: none;
}
.is-current .button {
  color: #fff;
  background: #0b60b7;
}
.is-current .button:hover {
  border-bottom: 2px solid transparent;
}

/* Tab Content */
.title {
  font-size: 25px;
  margin: 10px auto 20px;
}

.title:first-letter {
  font-size: 40px;
  color: #f00;
}

.box {
  display: flex;
}
@media screen and (max-width:767px) {
  .box {
    flex-direction: column;
    padding: 20px;
  }
}

3. Optional styles for tabbed content.

.text {
  width: 70%;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  margin: 20px 0 20px 20px;
}
@media screen and (max-width:767px) {
  .text {
    width: 100%;
    margin: 20px auto;
  }
}

.imageWrap {
  width: 30%;
}
@media screen and (max-width:767px) {
  .imageWrap {
    width: 100%;
  }
}

.image {
  width: 100%;
  box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
}

4. The JavaScript (jQuery script) to enable the tabbing system. Copy the snippets as displayed below and insert them after jQuery library.

$(function() {

  // Tabs
  var $tabTrigger = $('.js-tab-trigger');

  // Tabbed content
  var $tabContent = $('.js-tab-content');

  // Switch between tabbed content
  $tabTrigger.on('click', function(event) {

    // Prevent default click event
    event.preventDefault();

    // Get clicked tab element and data attribute
    var $target = $(event.currentTarget);
    var $list = $target.data('tab-list');
    var $info = $target.data('tab-info');

    // Update the selected tab
    $tabTrigger
      .filter('[data-tab-list="' + $list + '"]')
      .removeClass('is-current')
      .filter('[data-tab-info="' + $info + '"]')
      .addClass('is-current');

    // Update the selected content
    $tabContent
      .filter('[data-tab-list="' + $list + '"]')
      .removeClass('is-current')
      .hide()
      .filter('[data-tab-info="' + $info + '"]')
      .addClass('is-current')
      .show();
  });
  
});

---

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