Minimal Themeable jQuery Tabs Plugin - CardTabs

File Size: 11.9 KB
Views Total: 2754
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimal Themeable jQuery Tabs Plugin - CardTabs

CardTabs is an ultra-light, cross-browser jQuery tabs plugin that automatically creates tabs to switch between tabbed content on click.

How to use it:

1. Include the jQuery CardTabs plugin and other required resources on the webpage.

<link rel="stylesheet" href="jquery.cardtabs.css">
<script src="//"></script>
<script src="jquery.cardtabs.js"></script>

2. Create the tabbed content and define the tab names in the data-tab attribute:

<div class="demo">
  <div data-tab="tab 1">
    Tab 1 content
  <div data-tab="tab 2">
    Tab 2 content
  <div data-tab="tab 3">
    Tab 3 content

3. Call the main function cardTabs on the top container and done.


4. The plugin comes with 4 themes from which you can choose during init.


  // 'inset', 'graygreen' and 'wiki'
  'theme': ''

5. If you'd like to set the active tab on page load:

<div class="active" data-tab="tab 2">
  Tab 2 content

6. You're also allowed to create your own themes in the CSS as this:

/*  Green gray slate */ 
div.card-tabs-bar.graygreen {
  border-bottom: 1px solid #e5e5e5;
  border-radius: 3px;

div.card-tabs-bar.graygreen a {
  padding: 15px;
  border-radius: 0px;
  margin: 0;
  padding-bottom: 10px;
  margin-bottom: -2px;
  font-size: 17px;

div.card-tabs-bar.graygreen {
  background-color: #fafafa;
  border-top: 4px solid #2CC185;

div.card-tabs-stack.graygreen div[data-tab] {
  padding: 10px;
  background-color: #fafafa;
  border: 1px solid #e5e5e5;
  border-top: none;
  border-radius: 3px;

Change log:


  • Bugfixed

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