<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 ----------> <!-- Bootstrap Line Tabs by @keenthemes A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme Licensed under MIT --> <div class="container"> <div class="row"> <div class="col-md-12"> <h3>Default Tab</h3> <div class="tabbable-panel"> <div class="tabbable-line"> <ul class="nav nav-tabs"> <li class="active"> <a href="#tab_default_1" data-toggle="tab"> Tab 1 </a> </li> <li> <a href="#tab_default_2" data-toggle="tab"> Tab 2 </a> </li> <li> <a href="#tab_default_3" data-toggle="tab"> Tab 3 </a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab_default_1"> <p> I'm in Tab 1. </p> <p> <div class="row form-group"> <div class="col-sm-1">Headache</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Yes </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">No </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Fever</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Yes </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">No </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Nausea</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Yes </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">No </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Giddiness</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Yes </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">No </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">WeightLoss</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Yes </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">No </label> </div> </div> </p> </div> <div class="tab-pane" id="tab_default_2"> <p> I'm in Tab 2. </p> <div class="row form-group"> <div class="col-sm-1">Headache</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Yes </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">No </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Fever</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Yes </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">No </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Nausea</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Yes </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">No </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Giddiness</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Yes </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">No </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">WeightLoss</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Yes </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">No </label> </div> </div> </div> <div class="tab-pane" id="tab_default_3"> <p> I'm in Tab 3. </p> <div class="row form-group"> <div class="col-sm-1">Headache</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Yes </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">No </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Fever</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Yes </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">No </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Nausea</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Yes </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">No </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Giddiness</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Yes </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">No </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">WeightLoss</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Yes </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">No </label> </div> </div> </div> </div> </div> </div> </div> </div> </div> <br> <br> <br> <br>

/*** Bootstrap Line Tabs by @keenthemes A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme Licensed under MIT ***/ /* Tabs panel */ .tabbable-panel { border:1px solid #eee; padding: 10px; } /* Default mode */ .tabbable-line > .nav-tabs { border: none; margin: 0px; } .tabbable-line > .nav-tabs > li { margin-right: 2px; } .tabbable-line > .nav-tabs > li > a { border: 0; margin-right: 0; color: #737373; } .tabbable-line > .nav-tabs > li > a > i { color: #a6a6a6; } .tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover { border-bottom: 4px solid #fbcdcf; } .tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a { border: 0; background: none !important; color: #333333; } .tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i { color: #a6a6a6; } .tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu { margin-top: 0px; } .tabbable-line > .nav-tabs > li.active { border-bottom: 4px solid #f3565d; position: relative; } .tabbable-line > .nav-tabs > li.active > a { border: 0; color: #333333; } .tabbable-line > .nav-tabs > li.active > a > i { color: #404040; } .tabbable-line > .tab-content { margin-top: -3px; background-color: #fff; border: 0; border-top: 1px solid #eee; padding: 15px 0; } .portlet .tabbable-line > .tab-content { padding-bottom: 0; } /* Below tabs mode */ .tabbable-line.tabs-below > .nav-tabs > li { border-top: 4px solid transparent; } .tabbable-line.tabs-below > .nav-tabs > li > a { margin-top: 0; } .tabbable-line.tabs-below > .nav-tabs > li:hover { border-bottom: 0; border-top: 4px solid #fbcdcf; } .tabbable-line.tabs-below > .nav-tabs > li.active { margin-bottom: -2px; border-bottom: 0; border-top: 4px solid #f3565d; } .tabbable-line.tabs-below > .tab-content { margin-top: -10px; border-top: 0; border-bottom: 1px solid #eee; padding-bottom: 15px; }

$('.nav-tabs-dropdown').each(function(i, elm) { $(elm).text($(elm).next('ul').find('li.active a').text()); }); $('.nav-tabs-dropdown').on('click', function(e) { e.preventDefault(); $(e.target).toggleClass('open').next('ul').slideToggle(); }); $('#nav-tabs-wrapper a[data-toggle="tab"]').on('click', function(e) { e.preventDefault(); $(e.target).closest('ul').hide().prev('a').removeClass('open').text($(this).text()); });