Bootstrap Snippet Togglable tabs Nested using HTML CSS Bootstrap

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="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 second-level-menu">
    <div class="row">
        <div class="col-xs-12">
            <ul class="nav tag-switch" role="tablist">
                <li role="presentation" class="active level1"><a href="#second-level-menu1" role="tab" data-toggle="tab">AA</a></li>
                <li role="presentation" class="level1"><a href="#second-level-menu2" role="tab" data-toggle="tab">BB</a></li>
                <li role="presentation" class="level1"><a href="#second-level-menu3" role="tab" data-toggle="tab">CC</a></li>
                <li class="pull-right tab-content level2">
                    <ul class="list-inline tab-pane active" role="tabpanel" id="second-level-menu1">
                        <li role="presentation" class="active">
                            <a href="#second-level-menu1-content1" role="tab" data-toggle="tab">AA_1</a>
                        </li>
                        <li role="presentation">
                            <a href="#second-level-menu1-content2" role="tab" data-toggle="tab">AA_2</a>
                        </li>
                        <li role="presentation">
                            <a href="#second-level-menu1-content3" role="tab" data-toggle="tab">AA_3</a>
                        </li>
                    </ul>
                    <ul class="list-inline tab-pane" role="tabpanel" id="second-level-menu2">
                        <li role="presentation">
                            <a href="#second-level-menu2-content1" role="tab" data-toggle="tab">BB_1</a>
                        </li>
                        <li role="presentation">
                            <a href="#second-level-menu2-content2" role="tab" data-toggle="tab">BB_2</a>
                        </li>
                        <li role="presentation">
                            <a href="#second-level-menu2-content3" role="tab" data-toggle="tab">BB_3</a>
                        </li>
                    </ul>
                     <ul class="list-inline tab-pane" role="tabpanel" id="second-level-menu3">
                        <li role="presentation">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
a { color: #000000; }
a:hover { text-decoration: none; color: #000000; }
.tag-switch li { float: left;text-align:center}
.tag-switch { border-bottom: 3px solid #FF0000; }
.tag-switch li a { line-height: 25px; width: 80px;font-size: 20px; }
.tag-switch .active a { background-color: #FF0000;color:#fff }
.tag-switch li a:hover { background: #FF0000; }
.tag-switch li:last-child ul { margin-top:10px}
.tag-switch li:last-child a{font-size:16px;padding:2px 5px;background:none;color:#000000}
.tag-switch li:last-child ul .active a { background:#FF0000;color:#fff}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Togglable tabs Nested"
Bootstrap 3.2.0 Snippet by wangkj

Related: See More

Questions / Comments:

"Togglable tabs Nested" Bootstrap 3.2.0 Snippet by wangkj

Related: See More

Questions / Comments:

"Togglable tabs Nested"
Bootstrap 3.2.0 Snippet by wangkj