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>
  <div class="vtabs-content">
    <div class="vtab-content" id="tab1">
      Tab 1 Content
    </div>
    <div class="vtab-content" id="tab2">
      Tab 2 Content
    </div>
    <div class="vtab-content" id="tab3">
      Tab 3 Content
    </div>
  </div>
</div>

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.

$('.example').vTabs({
  // ...
})

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;
}

.vtab-toggle.active {
  background-color: #ccc; 
  color: #000;  
}

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

$('.example').vTabs({
  'hover': true,
})

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

$('.example').vTabs({
  'mobileOnly': true,
  'mobileViewportWidth': 639,
})

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

$('.example').vTabs({
  'variableHeight': false,
})

Changelog:

2023-03-20

• 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.