Bootstrap Snippet Tabbed Panels Reloaded using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <h2>Tabbed Panels with optional Dropdown</h2>
    <br>
    <div class="row">
        <div class="col-md-6">
            <div class="panel tabbed-panel compact-panel panel-default">
                <div class="panel-heading clearfix">
                    <div class="panel-title pull-left">Default Panel</div>
                    <div class="pull-right">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tab-default-1" data-toggle="tab">Page 1</a></li>
                            <li><a href="#tab-default-2" data-toggle="tab">Page 2</a></li>
                            <li><a href="#tab-default-3" data-toggle="tab">Page 3</a></li>
                            <li class="dropdown">
                                <a href="#" data-toggle="dropdown">More <span class="caret"></span></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#tab-default-4" data-toggle="tab">Page 4</a></li>
                                    <li><a href="#tab-default-5" data-toggle="tab">Page 5</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="tab-default-1">Page 1</div>
                        <div class="tab-pane fade" id="tab-default-2">Page 2</div>
                        <div class="tab-pane fade" id="tab-default-3">Page 3</div>
                        <div class="tab-pane fade" id="tab-default-4">Page 4</div>
                        <div class="tab-pane fade" id="tab-default-5">Page 5</div>
                    </div>
                </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.panel.tabbed-panel .panel-heading{
    padding: 5px 5px 0;
}
.panel.tabbed-panel .panel-heading .panel-title{
    padding: 9px 10px;
}
.panel.tabbed-panel.compact-panel .panel-heading .panel-title{
    font-size: 1em;
    line-height: 1em;
}
.panel.tabbed-panel .nav-tabs{
    border-bottom: none;
}
.panel.tabbed-panel.compact-panel .nav-tabs > li > a{
    line-height: 1em;
    border-bottom: 0;
}
.panel.tabbed-panel .nav-justified{
    margin-bottom: -1px;
}
.tabbed-panel.panel-default .nav-tabs > li > a,
.tabbed-panel.panel-default .nav-tabs > li > a:hover,
.tabbed-panel.panel-default .nav-tabs > li > a:focus {
    color: #777;
}
.tabbed-panel.panel-default .nav-tabs > .open > a,
.tabbed-panel.panel-default .nav-tabs > .open > a:hover,
.tabbed-panel.panel-default .nav-tabs > .open > a:focus,
.tabbed-panel.panel-default .nav-tabs > li > a:hover,
.tabbed-panel.panel-default .nav-tabs > li > a:focus {
    color: #777;
    background-color: #ddd;
    border-color: transparent;
}
.tabbed-panel.panel-default .nav-tabs > li.active > a,
.tabbed-panel.panel-default .nav-tabs > li.active > a:hover,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(function(){
    $('.nav-tabs a:first',this.$page).tab('show')
    $('.nav-tabs li:gt(0)',this.$page).each(function(){
        $(this).addClass('disabled');
        $('a',$(this)).attr('data-toggle','');
    });
    
    $('.next-tab').on('click',function(){
        var $panel = $(this).closest('.panel');
        var $tabs = $('.nav-tabs li',$panel);
        var $tab = $('.nav-tabs li.active',$panel);
        var index  = $tabs.index($tab);
        if (index < 0) {
            return; //no hope for you!
        }
        index++;
        var $next_tab = $('a',$tabs.eq(index));
        if (!$next_tab.length) {
            return;
        }
        $next_tab.parents('li').removeClass('disabled');
        $next_tab.attr('data-toggle','tab');
        $next_tab.tab('show');
    });
    $('.previous-tab').on('click',function(){
        var $panel = $(this).closest('.panel');
        var $tabs = $('.nav-tabs li',$panel);
        var $tab = $('.nav-tabs li.active',$panel);
        var index  = $tabs.index($tab);
        if (index < 0) {
            return; //no hope for you!
        }
        index--;
        var $previous_tab = $('a',$tabs.eq(index));
        if (!$previous_tab.length) {
            return;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Tabbed Panels Reloaded"
Bootstrap 3.3.0 Snippet by secondtruth

Related: See More

Questions / Comments:

"Tabbed Panels Reloaded" Bootstrap 3.3.0 Snippet by secondtruth

Related: See More

Questions / Comments:

"Tabbed Panels Reloaded"
Bootstrap 3.3.0 Snippet by secondtruth