CardTabs

Requirements
Simple usage
    HTML
    Javascript
Options
    Active tab
    Themes
Creating themes
Theme examples

• jQuery 1.2 or higher

Make sure that jQuery is loaded. Download jquery.cardtabs.js and jquery.cardtabs.css and add them to your page:

<link rel='stylesheet' href='path/to/jquery.cardtabs.css'>
<script type='text/javascript' src='path/to/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>
    <div data-tab="Tab two">
        /* contents of the second tab...  */
    </div>
    <div data-tab="Tab three">
        /* contents of the third tab...  */
    </div>
</div>

Use the following code to initialize the tabs.

<script type='text/javascript'>
    $('.container').cardTabs();
</script>

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': 'dark'});

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 a.active (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 a.active  { /* 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'});