Containers

Other containers

TABS


Examples

FIRST 1 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
SECOND 2 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
THIRD 3 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
FIRST 1 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
SECOND 2 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
THIRD 3 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
FIRST 1 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
SECOND 2 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
THIRD 3 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
FIRST 1 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
SECOND 2 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
THIRD 3 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
FIRST 1 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
SECOND 2 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
THIRD 3 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
FIRST 1 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
SECOND 2 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
THIRD 3 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
FIRST 1 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
SECOND 2 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
THIRD 3 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
FIRST 1 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
SECOND 2 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
THIRD 3 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
FIRST 1L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
SECOND 2L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
FIRST 1L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
SECOND 2 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
FIRST 1L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
SECOND 2L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
FIRST 1 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
SECOND 2 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
THIRD 3 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
FIRST 1 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
SECOND 2 L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
THIRD 3 L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem

Examples tab vertical

FIRST 1 L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
SECOND 2 L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
THIRD 3 L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
FIRST 1 L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
SECOND 2 L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
THIRD 3 L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
FIRST 1 L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
SECOND 2 L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
THIRD 3 L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
FIRST 1 L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
SECOND 2 L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
THIRD 3 L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
FIRST 1 L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
SECOND 2 L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
THIRD 3 L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
FIRST 1 L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
SECOND 2 L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
THIRD 3 L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
FIRST 1 L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
SECOND 2 L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
THIRD 3 L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
FIRST 1 L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
SECOND 2 L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
THIRD 3 L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem

Installation

<link rel="stylesheet" href='../css/components.css'>
<script src='../scripts/jquery.tab-accordion.js'></script>

Usage

<div class="tab-box">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
    </ul>
    <div class="panel active">
        ...
    </div>
    <div class="panel">
        ..
    </div>
    <div class="panel">
        ...
    </div>
</div>
<!-- second tab -->
<div class="tab-box inverse">
    <div class="panel active">
        ...
    </div>
    <div class="panel">
        ...
    </div>
    <div class="panel">
        ...
    </div>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
    </ul>
</div>
<div class="tab-box">
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#"><i class="fa fa-home"></i> Home</a></li>
        <li><a href="#"><i class="fa fa-user"></i>  Profile</a></li>
    </ul>
    <div class="panel active">
        ...
    </div>
    <div class="panel">
        ...
    </div>
</div>
<!-- second tab -->
<div class="tab-box">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#"><i class="fa fa-home"></i></a></li>
        <li><a href="#"><i class="fa fa-user"></i></a></li>
    </ul>
    <div class="panel active">
        ...
    </div>
    <div class="panel">
        ...
    </div>
</div>
<!-- third tab -->
<div class="tab-box">
    <ul class="nav nav-tabs nav-center">
        <li class="active" data-anima="slide-right-left" data-trigger="hover">
            <a href="#"><i class="fa fa-home anima"></i> Home</a>
        </li>
        <li>
            <a href="#" data-anima="slide-right-left" data-trigger="hover"><i class="fa fa-user anima"></i>  Profile</a>
        </li>
    </ul>
    <div class="panel active">
        ...
    </div>
    <div class="panel">
        ...
    </div>
</div>
<div class="tab-box pills" data-tab-anima="slide-top-bottom">
    <ul class="nav nav-pills nav-justified">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
    </ul>
    <div class="panel active">
        ...
    </div>
    <div class="panel">
        ...
    </div>
    <div class="panel">
        ...
    </div>
</div>
<!-- second tab -->
<div class="tab-box pills" data-tab-anima="pulse-horizontal">
    <ul class="nav nav-pills nav-center">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
    </ul>
    <div class="panel active">
        ...
    </div>
    <div class="panel">
        ...
    </div>
    <div class="panel">
        ...
    </div>
</div>
<div class="tab-box left">
    <ul class="nav nav-tabs col-md-4">
        <li class="active"><a href="#home">Home</a></li>
        <li><a href="#profile">Profile</a></li>
        <li><a href="#messages">Messages</a></li>
    </ul>
    <div class="panel-box col-md-8">
        <div class="panel active" id="home">
            ...
        </div>
        <div class="panel" id="profile">
            ...
        </div>
        <div class="panel" id="messages">
            ...
        </div>
    </div>
</div>
<!-- second tab -->
<div class="tab-box right">
    <div class="panel-box col-md-8">
        <div class="panel active">
            ...
        </div>
        <div class="panel">
            ...
        </div>
        <div class="panel">
            ...
        </div>
    </div>
    <ul class="nav nav-tabs col-md-4">
        <li class="active"><a href="#"><i class="fa fa-home"></i> Home</a></li>
        <li><a href="#"><i class="fa fa-user"></i> Profile</a></li>
        <li><a href="#"><i class="fa fa-mail-forward"></i> Messages</a></li>
    </ul>
</div>
<div class="tab-box left pills" data-tab-anima="fade-right">
    <ul class="nav nav-pills col-md-4">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
    </ul>
    <div class="panel-box col-md-8">
        <div class="panel active" id="home">
            ...
        </div>
        <div class="panel" id="profile">
            ...
        </div>
        <div class="panel" id="messages">
            ...
        </div>
    </div>
</div>
<!-- second tab -->
<div class="tab-box right pills" data-tab-anima="fade-in">
    <div class="panel-box col-md-8">
        <div class="panel active" id="home">
            ...
        </div>
        <div class="panel" id="profile">
            ...
        </div>
        <div class="panel" id="messages">
            ...
        </div>
    </div>
    <ul class="nav nav-pills col-md-4">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
    </ul>
</div>

Main settings

Name Type Description
Justified tabs CSS class Add class nav-justified to nav-tabs object. Example: <ul class="nav nav-tabs nav-justified"> ... </ul>.
For vertical tabs add class nav-justified-v to nav-tabs object. Example: <ul class="nav nav-tabs nav-justified-v"> ... </ul>.
Left tabs CSS class Add class nav-left to nav-tabs object. Example: <ul class="nav nav-tabs nav-left"> ... </ul>.
Centered tabs CSS class Add class nav-center to nav-tabs object. Example: <ul class="nav nav-tabs nav-center"> ... </ul>.
Animations Data attribute Add attribute data-tab-anima="animation-name" to tab-box code. Example: <div class="tab-box" data-tab-anima="fade-right"> ... </div>. Animations list available on animation page
Tab pills CSS class Add class nav-pills to nav-tabs object. Example: <ul class="nav nav-pills"> ... </ul>.
Target tab Data attribute Default tabs are auto linked to correct panel, but you can set manual tab opening in this way:

1 ) Set the href of the link of nav-tabs code with ID of panel you want open. Example: <ul class="nav nav-tabs"><><a href="#ID">Home</a></li></ul>.
2 ) Set the ID of panel. Example: <div class="panel" id="ID"> ... </div>.

Example:

<div class="tab-box">
    <ul class="nav nav-tabs">
        <li><a href="#home">Home</a></li>
    </ul>
    <div class="panel" id="home">
            ...
    </div>
</div>
                                            
Tab activation Javascript You can activate individual tabs in several ways:

$('#myTabs > .nav-tabs li:first').click()  // Select first tab
$('#myTabs > .nav-tabs li:last').click() // Select last tab
$('#myTabs > .nav-tabs li:eq(1)').click() // Select second tab (0-indexed)
                                            
Try it
Nested tabs Javascript Nested vertical justified tabs require a Javascript function before show the nested tab:

function initTabAccordion() {
    setTimeout(function () { startTabAccordion(); }, 300);
}
function startTabAccordion() {
    $(".tab-box.left,.tab-box.right").each(function () {
        var t = $(this).find(".nav");
        var p = $(this).find(".panel-box");
        if ($(p).outerHeight() < $(t).outerHeight()) $(p).find(".panel").css("height", $(t).outerHeight() + "px");
        else $(t).css("height", $(p).find(".panel").outerHeight() + "px");
    });
    $(".nav.nav-justified-v").each(function () {
        var count_m = $(this).find("li").length;
        var a = $(this).find("li a");
        $(a).css("height", $(this).outerHeight() / count_m + "px");
        $(a).css("line-height", $(a).height() + "px")
    });
}

SCROLL BOX


Examples

Scroll this content

Doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Scroll this content

Doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Installation

<script src='../scripts/jquery.slimscroll.min.js'></script>

Usage

<!-- FIRST SCROLL BOX -->
<div class="col-md-6">
    <div class="scroll-content" data-height="230"> 
    ... 
    </div>
</div>
<!-- SECOND SCROLL BOX -->
<div class="col-md-6 well" style="max-height:350px">
    <div class="scroll-content" data-height=".col-md-6" data-options="alwaysVisible:true, size:7px, color:#337AB7">
    ...
    </div>
</div>

Main settings

Name Type Description
HTML initialization Data attribute Add class scroll-content to target object and attribute data-height="123", replace 123 with height in px.
Height Data attribute Scroll box's settings are many, the most important is data-height, it's used for set the height of scroll box:
Data attribute Description
data-height='auto' or not inserted Default value, auto calculate the max height based on: screen height - (footer height + menu height). Add attribute data-height-remove='123' to set: screen height - data-height-remove, value in px. If for example screen height is 1080px and data-height-remove='100', scroll box height will be 980px.
data-height='123' Set the height of scrollbox. Replace 123 with height in px.
data-height='.class' Target class of a parent container, will be used container height.
data-height='#ID' Target ID of a parent container, will be used container height.
data-height='fullscreen' Will be used screen full height.
data-height-remove='123' Adjust the height when it's setted to ID or class or full width, this feature remove desired height from original height.
Mobile disabled CSS class To disable the scroll box only on mobile devies and show all content vertically add class scroll-mobile-disabled to scroll-box object. Example: <div class="scroll-content scroll-mobile-disabled"> ... </div>.
Settings Data attribute Most of settings can be passed through data-options attribute: data-options="option-1:value,option-2:value, ...". Example: <div class="scroll-content" data-height=".col-md-6" data-options="alwaysVisible:true, size:7px, color:#337AB7">. Full options here

Complete documentation and external resources


COLLAPSE


Examples

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem. L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem

Installation

<link rel="stylesheet" href="../css/components.css">
<script src='../scripts/jquery.tab-accordion.js'></script>

Usage

<div class="collapse-box">
    <button class="collapse-button btn btn-default btn-sm dropdown-toggle" type="button">
        Open panel - example A <span class="caret"></span>
    </button>
    <div class="panel">
        <div class="well">
            ...
        </div>
    </div>
</div>
<div class="collapse-box">
    <div class="panel">
        <div class="well">
           ...
        </div>
    </div>
    <button class="collapse-button btn btn-default btn-sm dropdown-toggle" type="button">
        Open panel - example B <span class="caret"></span>
    </button>
</div>
<div class="collapse-box">
    <div class="panel">
        <div class="well">
            ...
        </div>
    </div>
    <button class="collapse-button btn btn-default btn-sm dropdown-toggle" type="button" data-time="3000" data-height="50">
        Open panel - example C <span class="caret"></span>
    </button>
</div>
<div class="collapse-box" data-height="50">
    <div class="panel">
        ...
    </div>
    <div class="text-center;">
        <a class="collapse-button">
            Show all <span class="caret"></span>
        </a>
    </div>
</div>

Main settings

Name Type Description
HTML settings Data attribute Collapse settings are 2, data-time and data-height of collapse panel height and open height. Example: <button class="collapse-button dropdown-toggle" type="button" data-time="3000" data-height="50">Open</button>.

Data attribute Description
data-time Number of milliseconds for open animation data-time='1000'
data-height (for opened height) Set the height in px of collapse when it's opened, must be placed on collapse button code data-height='50'
data-height (for collapse panel height) Set the height in px of collapse panel, must be placed on collapse panel object <div class="collapse-box" data-height="50">
Javascript initialization Javascript Collapse a panel with function $('#collapse-id .panel').collapse(). Function allow 2 settings, time and height. Example: $('#collapse-id .panel').collapse({ height: 150, time: 1500 }).

Try it

ACCORDION


Examples

Accordion item 1
L'orem ipsum dolor "sitamet", Cras justo odio consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
Accordion item 2
L'orem ipsum dolor "sitamet", Cras justo odio consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem. L'orem ipsum dolor "sitamet", Cras justo odio consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
Accordion item 3
L'orem ipsum dolor "sitamet", Cras justo odio consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
Accordion item 1
L'orem ipsum dolor "sitamet", Cras justo odio consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
Accordion item 2
L'orem ipsum dolor "sitamet", Cras justo odio consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem. L'orem ipsum dolor "sitamet", Cras justo odio consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
Accordion item 3
L'orem ipsum dolor "sitamet", Cras justo odio consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
Accordion item 1
L'orem ipsum dolor "sitamet", Cras justo odio consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
Accordion item 2
L'orem ipsum dolor "sitamet", Cras justo odio consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem. L'orem ipsum dolor "sitamet", Cras justo odio consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem
Accordion item 3
L'orem ipsum dolor "sitamet", Cras justo odio consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem

Installation

<link rel="stylesheet" href="../css/components.css">
<script src='../scripts/jquery.tab-accordion.js'></script>

Usage

<div class="list-group accordion-list">
    <div class="list-group-item">
        <a href="#"> Accordion item 1</a>
        <div class="panel">
            <div class="inner">
                ...
            </div>
        </div>
    </div>
    <div class="list-group-item">
        <a href="#"> Accordion item 2</a>
        <div class="panel">
            <div class="inner">
                ...
            </div>
        </div>
    </div>
    <div class="list-group-item">
        <a href="#"> Accordion item 3</a>
        <div class="panel">
            <div class="inner">
                ...
            </div>
        </div>
    </div>
</div>
<div class="list-group accordion-list" data-type="accordion" data-time="1000">
    <div class="list-group-item">
        <a href="#"> Accordion item 1</a>
        <div class="panel">
            <div class="inner">
                ...
            </div>
        </div>
    </div>
    <div class="list-group-item">
        <a href="#"> Accordion item 2</a>
        <div class="panel">
            <div class="inner">
                ...
            </div>
        </div>
    </div>
    <div class="list-group-item">
        <a href="#"> Accordion item 3</a>
        <div class="panel">
            <div class="inner">
                ...
            </div>
        </div>
    </div>
</div> 
<div class="list-group accordion-list" data-type="visible">
    <div class="list-group-item">
        <a href="#"> Accordion item 1</a>
        <div class="panel">
            <div class="inner">
                ...
            </div>
        </div>
    </div>
    <div class="list-group-item">
        <a href="#"> Accordion item 2</a>
        <div class="panel">
            <div class="inner">
                ...
            </div>
        </div>
    </div>
    <div class="list-group-item">
        <a href="#"> Accordion item 3</a>
        <div class="panel">
            <div class="inner">
                ...
            </div>
        </div>
    </div>
</div> 

Main settings

Name Type Description
HTML settings Data attribute Accordion settings are 2, data-time and data-type. Example: <div class="list-group accordion-list" data-time="3000" data-type="visible">...</div>.

Data attribute Default Description
data-time 500 Number of milliseconds for open and close animations. data-time='1000'
data-type -- Set the accordion type, value accepted are accordion and visible. Example: data-type='accordion'.
data-open -- Open the select tab automatically on page load. Insert a number from 0 to. Example: data-open='1'.