Bootstrap Snippet Collapsible well with tabs using HTML CSS

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">
    
    <a class="btn btn-primary" data-toggle="collapse" data-target="#tabs" aria-expanded="false" aria-controls="tablist">
        Toggle collapse
    </a>
    
    <div class="collapse" id="tabs">
        <div class="well">
            <div role="tabpanel">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Tab 1</a></li>
                    <li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Tab 2</a></li>
                    <li role="presentation"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">Tab 3</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <!-- Tab 1 -->
                    <div role="tabpanel" class="tab-pane active" id="tab1">
                        <div class="row">
                            Your content
                        </div>
                    </div>
                    
                    <!-- Tab 2 -->
                    <div role="tabpanel" class="tab-pane" id="tab2">
                        <div class="row">
                            Your content
                        </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
body {
    margin-top: 20px;
}
/* Collapse */
.collapse {
  color: #000;
  padding-top: 20px;
}
.collapse.in {
  display: block;
}
tr.collapse.in {
  display: table-row;
  background-color: transparent;
}
tbody.collapse.in {
  display: table-row-group;
  background-color: transparent;
}
.collapsing {
  padding-top: 20px;
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-timing-function: ease;
       -o-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-duration: .35s;
       -o-transition-duration: .35s;
          transition-duration: .35s;
  -webkit-transition-property: height, visibility;
       -o-transition-property: height, visibility;
          transition-property: height, visibility;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Collapsible well with tabs"
Bootstrap 3.3.0 Snippet by zayadur

Related: See More

Questions / Comments:

"Collapsible well with tabs" Bootstrap 3.3.0 Snippet by zayadur

Related: See More

Questions / Comments:

"Collapsible well with tabs"
Bootstrap 3.3.0 Snippet by zayadur