Simple Tabs jQuery Plugin With Fading Transitions - vTabs.js

File Size: 6.76 KB
Views Total: 437
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple Tabs jQuery Plugin With Fading Transitions - vTabs.js

vTabs.js is a simple jQuery tabs plugin for creating a responsive, mobile-friendly tabbed interface that allows the users to switch between tabbed content with a fade transition when clicking or hovering tabs.

Great for product/service descriptions, FAQs, and portfolios where you want to present the information in a clean and organized manner.

How to use it:

1. Add tab navigation and tabbed content to your webpage.

<div class="example">
  <div class="vtabs-toggles">
    <div class="vtab-toggle" data-target="#tab1">Tab 1</div>
    <div class="vtab-toggle" data-target="#tab2">Tab 2</div>
    <div class="vtab-toggle" data-target="#tab3">Tab 3</div>
  <div class="vtabs-content">
    <div class="vtab-content" id="tab1">
      Tab 1 Content
    <div class="vtab-content" id="tab2">
      Tab 2 Content
    <div class="vtab-content" id="tab3">
      Tab 3 Content

2. Import the vtabs.js into your document.

import "/path/to/vtabs/vtabs.min.js";
<!-- OR -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/vtabs/vtabs.js"></script>

3. Call the function vTabs on the top container.

  // ...

4. Apply your own CSS styles to the tabs.

/* Example CSS */
.vtabs-toggles { 
  display: flex; 

.vtab-toggle { 
  padding: 1.25rem 2.5rem; 
  border-radius: 3px; 
  background-color: #4F46E5; 
  color: #fff; 
  cursor: pointer; 
  margin-right: 2rem;
} {
  background-color: #ccc; 
  color: #000;  

5. Switch between tabbed content by hovering over tabs instead.

  'hover': true,

6. Determine whether to activate the tabs plugin only on mobile devices. Default: false.

  'mobileOnly': true,
  'mobileViewportWidth': 639,

7. Determine whether to enable varaible height. Default: true.

  'variableHeight': false,



  • Fix the issue where child element's height in tab content is mutated and causing mismatch of tabs wrapper's height.

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