Skip to content
Minimal jQuery plugin for simple tabs
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


CardTabs is yet another ultra-light jQuery plugin that allows for very simple tabs. The usage is explained below, click here for a demo. CardTabs is licensed under MIT.


  • jQuery 1.2 or higher

Simple usage

Make sure that jQuery is loaded. Get a hold of js/jquery.cardtabs.js and css/jquery.cardtabs.css by cloning the repo or downloading the latest release (v. 1.0) and add them to your page:

<link rel='stylesheet' href='assets_path/css/jquery.cardtabs.css'>
<script type='text/javascript' src='assets_path/js/jquery.cardtabs.js'></script>


The html is very simple. There is one container, with the actual tabs as divs, the data-tab attribute has to contain their name. The links on the top are automatically generated.

<div class='container'>
    <div data-tab="Tab one">
    	/* contents of the first tab...  */
    <div data-tab="Tab two">
        /* contents of the second tab...  */
    <div data-tab="Tab three">
        /* contents of the third tab...  */


Use the following code to initialize the tabs.

<script type='text/javascript'>


Manualy set the active tab

It is very simple to load another tab as the active tab. Just give that tab active as class:

<div class='active' data-tab='Active tab'></div>


Some themes are included in card tabs, to use them they have to be defined in the javascript, like this:

$('.container').cardTabs({'theme': 'inset'});

Creating themes

Themes are applied by a single css class (the theme name) on the generated elements. Making your own compatible theme is thus not that hard. You just need to style these elements: div.card-tabs-bar.yourthemename (the link bar), div.card-tabs-bar.yourthemename a (a link in the link bar), div.card-tabs-bar.yourthemename (the active tab in the bar) and div.card-tabs-stack.yourthemename div[data-tab] (the shown tab itself).

div.card-tabs-bar.yourthemename{ /* the link bar */

div.card-tabs-bar.yourthemename a { /* A link in the link bar */


div.card-tabs-bar.yourthemename  { /* The active tab link */ 


div.card-tabs-stack.yourthemename div[data-tab] { /* The shown tab itself */


Your theme can be loaded like this then:

$('.container').cardTabs({'theme': 'yourthemename'});
You can’t perform that action at this time.