Getting started
Install in seconds
<link rel="stylesheet" href="path/to/jquery.cardtabs.css">
<script src="path/to/jquery.cardtabs.js" defer></script><div class="container">
<div data-tab="Overview">...</div>
<div data-tab="Details">...</div>
</div>document.querySelectorAll('.container').forEach((el) => el.cardTabs());
// or
cardTabs('.container');Usage
Keep your markup simple
HTML
<div class="example-tabs">
<div data-tab="Tab one">First tab content</div>
<div data-tab="Tab two">Second tab content</div>
<div data-tab="Tab three">Third tab content</div>
</div>JavaScript
const tabs = document.querySelector('.example-tabs');
tabs.cardTabs();
// or
cardTabs('.example-tabs', { theme: 'inset' });Themes
Small set of built-in styles
Soft and minimal styling for neutral interfaces.
Great for dashboards, docs, and low-contrast applications.
Clean, fresh, and slightly more prominent for content sections.
A practical choice when you want calm visual hierarchy.
A classic editorial feel with subtle blue tones and structured tabs.
Useful for documentation pages and knowledge bases.
Customization
Make it your own
.card-tabs-bar.your-theme {
/* bar styles */
}
.card-tabs-bar.your-theme .card-tabs-tab {
/* tab button styles */
}
.card-tabs-bar.your-theme .card-tabs-tab.active {
/* active state */
}
.card-tabs-stack.your-theme .card-tabs-panel {
/* panel styles */
}