<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> </div> <!-- Tab 3 --> <div role="tabpanel" class="tab-pane" id="tab3"> <div class="row"> Your content </div> </div> </div> <!-- Tab content --> </div> </div> </div> <!-- /.collapse --> </div>

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; } /* Tabs */ .nav-tabs { border-bottom: 1px solid #ddd; } .nav-tabs > li { float: left; margin-bottom: -1px; } .nav-tabs > li > a { color: #000; margin-right: 2px; line-height: 1.42857143; border: 1px solid transparent; border-radius: 4px 4px 0 0; } .nav-tabs > li > a:hover { color: #000; border-color: #eee #eee #ddd; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #000; cursor: default; background-color: #fff; border: 1px solid #ddd; border-bottom-color: transparent; } .tab-content > .tab-pane { display: none; background-color: transparent; text-align: left; padding-top: 20px; padding-bottom: 10px; padding-left: 20px; border-bottom: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-right: 1px solid #d5d5d5; } .tab-content > .active { display: block; background-color: transparent; } /* Well */ .well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #fff; border: 1px solid #d5d5d5; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); }