Minimal Tab Menu Plugin In jQuery & Vanilla JavaScript

A minimal clean tab menu (also called tabbed content, tabbing system) implemented in either jQuery and Vanilla JavaScript.

How to use it:

1. Add your tab list and tabbed content to the tabbing system.

<ul class="tab-list">
  <li><a data-id="yoga" class="tab-item active" href="#" role="tab">Yoga</a></li>
  <li><a data-id="pilates" class="tab-item" href="#" role="tab">Pilates</a></li>
  <li><a data-id="hiit" class="tab-item" href="#" role="tab">HIIT</a></li>
</ul>
<div id="yoga" class="tab-inner active">
  <p class="tab-text">
    Yoga is a group of physical, mental, and spiritual practices or disciplines which originated in ancient India. Yoga is one of the six orthodox philosophical schools of Hinduism.
  </p>
</div>
<div id="pilates" class="tab-inner">
  <p class="tab-text">
    Pilates is a physical fitness system developed in the early 20th century by Joseph Pilates, after whom it was named. Pilates called his method "Contrology".
  </p>
</div>
<div id="hiit" class="tab-inner">
  <p class="tab-text">
    HIIT focuses on large, global muscles and Pilates works on the core, so when combined they work on both large and small muscle groups. This ensures a whole body focus.
  </p>
</div>

2. The main CSS for the tabbing system.

.tab-list {
  display: flex;
  justify-content: center;
}

.tab-item {
  display: block;
  background: #ffffff;
  color: #333333;
  padding: 5px 10px;
}

.tab-item.active {
  background: #333333;
  color: #ffffff;
  border-radius: 5px 5px 0 0;
}

.tab-inner {
  display: none;
  background: #333333;
  padding: 15px;
}

.tab-inner.active {
  display: block;
}

3. Activate the tabbing system with vanilla JavaScript.

"use strict";
const tabItems = document.querySelectorAll(".tab-item");
const tabInners = document.querySelectorAll(".tab-inner");
tabItems.forEach((clickItem) => {
  clickItem.addEventListener("click", (e) => {
    e.preventDefault();
    tabItems.forEach((tabItem) => {
      tabItem.classList.remove("active");
    });
    clickItem.classList.add("active");
    tabInners.forEach((tabInner) => {
      tabInner.classList.remove("active");
    });
    document.getElementById(clickItem.dataset.id).classList.add("active");
  });
});

4. Activate the tabbing system with jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

$(function () {
  const tabItem = $(".tab-item");
  const tabInner = $(".tab-inner");

  tabItem.on("click", function () {
    tabItem.removeClass("active");
    $(this).addClass("active");

    tabInner.removeClass("active");

    $("#" + $(this).data("id")).addClass("active");

    return false;
  });
});

Changelog:

2021-03-31

• Updated styles

---

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