"Collapse extra tabs to drop down"
Bootstrap 3.3.0 Snippet by BpDemo

Post to Facebook Tweet this

<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"> <div class="row"> <ul class="nav nav-tabs" id="tabs"> <li><a data-toggle="tab" href="#Tab1"><i class="glyphicon glyphicon-edit"></i>Tab1</a></li> <li><a data-toggle="tab" href="#Tab2"><i class="glyphicon glyphicon-user"></i>Tab2</a></li> <li><a data-toggle="tab" href="#Tab3"><i class="glyphicon glyphicon-minus"></i>Tab3</a></li> <li><a data-toggle="tab" href="#Tab4"><i class="glyphicon glyphicon-plus"></i>Tab4</a></li> <li><a data-toggle="tab" href="#Tab5"><i class="glyphicon glyphicon-ok"></i>Tab5</a></li> <li><a data-toggle="tab" href="#Tab6"><i class="glyphicon glyphicon-remove"></i>Tab6</a></li> <li><a data-toggle="tab" href="#Tab7"><i class="glyphicon glyphicon-upload"></i>Tab7</a></li> <li><a data-toggle="tab" href="#Tab8"><i class="glyphicon glyphicon-download"></i>Tab8</a></li> <li><a data-toggle="tab" href="#Tab9"><i class="glyphicon glyphicon-edit"></i>Tab9</a></li> <li><a data-toggle="tab" href="#Tab10"><i class="glyphicon glyphicon-lock"></i>Tab10</a></li> <li><a data-toggle="tab" href="#Tab11"><i class="glyphicon glyphicon-print"></i>Tab11</a></li> <li><a data-toggle="tab" href="#Tab12"><i class="glyphicon glyphicon-font"></i>Tab12</a></li> <li><a data-toggle="tab" href="#Tab13"><i class="glyphicon glyphicon-italic"></i>Tab13</a></li> <li><a data-toggle="tab" href="#Tab14"><i class="glyphicon glyphicon-camera"></i>Tab14</a></li> <li><a data-toggle="tab" href="#Tab15"><i class="glyphicon glyphicon-play"></i>Tab15</a></li> <li><a data-toggle="tab" href="#Tab16"><i class="glyphicon glyphicon-random"></i>Tab16</a></li> <li><a data-toggle="tab" href="#Tab17"><i class="glyphicon glyphicon-magnet"></i>Tab17</a></li> <li><a data-toggle="tab" href="#Tab18"><i class="glyphicon glyphicon-tint"></i>Tab18</a></li> <li id="lastTab"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> More <span class="caret"></span> </a> <ul class="dropdown-menu" id="collapsed"> </ul> </li> </ul> <div class="tab-content"> <div id="Tab1" class="tab-pane fade in active"> <h3>Tab1 Contents</h3> <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 class="row form-group"> <div class="col-sm-1">LegWeakness</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Right </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Left </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Neither </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Involuntary</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 id="Tab2" class="tab-pane fade"> <h3>Tab2</h3> <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 class="row form-group"> <div class="col-sm-1">LegWeakness</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Right </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Left </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Neither </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Involuntary</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 id="Tab3" class="tab-pane fade"> <h3>Tab3</h3> <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 class="row form-group"> <div class="col-sm-1">LegWeakness</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Right </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Left </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Neither </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Involuntary</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 id="Tab4" class="tab-pane fade"> <h3>Tab4</h3> <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 class="row form-group"> <div class="col-sm-1">LegWeakness</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Right </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Left </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Neither </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Involuntary</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 id="Tab5" class="tab-pane fade"> <h3>Tab5</h3> <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 class="row form-group"> <div class="col-sm-1">LegWeakness</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Right </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Left </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Neither </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Involuntary</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 id="Tab6" class="tab-pane fade"> <h3>Tab6</h3> <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 class="row form-group"> <div class="col-sm-1">LegWeakness</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Right </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Left </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Neither </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Involuntary</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 id="Tab7" class="tab-pane fade"> <h3>Tab7</h3> <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 class="row form-group"> <div class="col-sm-1">LegWeakness</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Right </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Left </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Neither </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Involuntary</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 id="Tab8" class="tab-pane fade"> <h3>Tab8</h3> <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 class="row form-group"> <div class="col-sm-1">LegWeakness</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Right </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Left </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Neither </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Involuntary</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 id="Tab9" class="tab-pane fade"> <h3>Tab9</h3> <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 class="row form-group"> <div class="col-sm-1">LegWeakness</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Right </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Left </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Neither </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Involuntary</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 id="Tab10" class="tab-pane fade"> <h3>Tab10</h3> <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 class="row form-group"> <div class="col-sm-1">LegWeakness</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Right </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Left </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Neither </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Involuntary</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 id="Tab11" class="tab-pane fade"> <h3>Tab11</h3> <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 class="row form-group"> <div class="col-sm-1">LegWeakness</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Right </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Left </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Neither </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Involuntary</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 id="Tab12" class="tab-pane fade"> <h3>Tab12</h3> <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 class="row form-group"> <div class="col-sm-1">LegWeakness</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Right </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Left </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Neither </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Involuntary</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 id="Tab13" class="tab-pane fade"> <h3>Tab13</h3> <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 class="row form-group"> <div class="col-sm-1">LegWeakness</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Right </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Left </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Neither </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Involuntary</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 id="Tab14" class="tab-pane fade"> <h3>Tab14</h3> <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 class="row form-group"> <div class="col-sm-1">LegWeakness</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Right </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Left </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Neither </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Involuntary</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 id="Tab15" class="tab-pane fade"> <h3>Tab15</h3> <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 class="row form-group"> <div class="col-sm-1">LegWeakness</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Right </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Left </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Neither </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Involuntary</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 id="Tab16" class="tab-pane fade"> <h3>Tab16</h3> <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 class="row form-group"> <div class="col-sm-1">LegWeakness</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Right </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Left </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Neither </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Involuntary</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 id="Tab17" class="tab-pane fade"> <h3>Tab17</h3> <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 class="row form-group"> <div class="col-sm-1">LegWeakness</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Right </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Left </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Neither </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Involuntary</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 id="Tab18" class="tab-pane fade"> <h3>Tab6</h3> <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 class="row form-group"> <div class="col-sm-1">LegWeakness</div> <div class=" col-sm-3 btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked>Right </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Left </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off">Neither </label> </div> </div> <div class="row form-group"> <div class="col-sm-1">Involuntary</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>
var autocollapse = function() { var tabs = $('#tabs'); var tabsHeight = tabs.innerHeight(); if (tabsHeight >= 50) { while(tabsHeight > 50) { //console.log("new"+tabsHeight); var children = tabs.children('li:not(:last-child)'); var count = children.size(); $(children[count-1]).prependTo('#collapsed'); tabsHeight = tabs.innerHeight(); } } else { while(tabsHeight < 50 && (tabs.children('li').size()>0)) { var collapsed = $('#collapsed').children('li'); var count = collapsed.size(); $(collapsed[0]).insertBefore(tabs.children('li:last-child')); tabsHeight = tabs.innerHeight(); } if (tabsHeight>50) { // double chk height again autocollapse(); } } }; $(document).ready(function() { autocollapse(); // when document first loads $(window).on('resize', autocollapse); // when window is resized });

Related: See More

Paper Kit
Tabs style 1
Bootstrap Tabs with Table
Tabs

Questions / Comments: