<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="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" href="#filter1"> Filter </a> <a class="pull-right" data-toggle="collapse" href="#filter1"> <span class="glyphicon glyphicon-filter"></span> </a> </h4> </div> <div id="filter1" class="panel-collapse collapse in"> <div class="panel-body"> <div class="filter-setting"> <form action="" mathod="GET"> <label>Lorem Ipsum</label> <a class="pull-right collapsed-icon-toggle" href="#coll-0" data-toggle="collapse"> <span class="glyphicon glyphicon-minus on-opened"></span> <span class="glyphicon glyphicon-plus on-closed"></span> </a> <br/> <div id="coll-0" class="collapse in"> <input type="text" placeholder="150"/> - <input type="text" placeholder="10000"/> </div> <hr class="line"/> <label>Lorem Ipsum</label> <a class="pull-right collapsed-icon-toggle" href="#coll-1" data-toggle="collapse"> <span class="glyphicon glyphicon-minus on-opened"></span> <span class="glyphicon glyphicon-plus on-closed"></span> </a> <br/> <div id="coll-1" class="collapse in"> <div class="padding-v-xs" data-toggle="buttons"> <label class="btn btn-default btn-xs ico"> <input type="checkbox" name="" value="" autocomplete="off"/> <span class="icon glyphicon glyphicon-ok"></span> </label> <span>Lorem Ipsum 1</span> </div> <div class="padding-v-xs" data-toggle="buttons"> <label class="btn btn-default btn-xs ico"> <input type="checkbox" name="" value="" autocomplete="off"/> <span class="icon glyphicon glyphicon-ok"></span> </label> <span>Lorem Ipsum 1</span> </div> <div class="padding-v-xs" data-toggle="buttons"> <label class="btn btn-default btn-xs ico"> <input type="checkbox" name="" value="" autocomplete="off"/> <span class="icon glyphicon glyphicon-ok"></span> </label> <span>Lorem Ipsum 1</span> </div> <div class="padding-v-xs" data-toggle="buttons"> <label class="btn btn-default btn-xs ico"> <input type="checkbox" name="" value="" autocomplete="off"/> <span class="icon glyphicon glyphicon-ok"></span> </label> <span>Lorem Ipsum 1</span> </div> </div> <hr class="line"/> <label>Lorem Ipsum</label> <a class="pull-right collapsed-icon-toggle" href="#coll-2" data-toggle="collapse"> <span class="glyphicon glyphicon-minus on-opened"></span> <span class="glyphicon glyphicon-plus on-closed"></span> </a> <br/> <div id="coll-2" class="scroll-v-250px collapse in"> <div class="padding-v-xs" data-toggle="buttons"> <label class="btn btn-default btn-xs ico"> <input type="checkbox" name="" value="" autocomplete="off"/> <span class="icon glyphicon glyphicon-ok"></span> </label> <span>Lorem Ipsum 1</span> </div> <div class="padding-v-xs" data-toggle="buttons"> <label class="btn btn-default btn-xs ico"> <input type="checkbox" name="" value="" autocomplete="off"/> <span class="icon glyphicon glyphicon-ok"></span> </label> <span>Lorem Ipsum 2</span> </div> <div class="padding-v-xs" data-toggle="buttons"> <label class="btn btn-default btn-xs ico"> <input type="checkbox" name="" value="" autocomplete="off"/> <span class="icon glyphicon glyphicon-ok"></span> </label> <span>Lorem Ipsum 3</span> </div> <div class="padding-v-xs" data-toggle="buttons"> <label class="btn btn-default btn-xs ico"> <input type="checkbox" name="" value="" autocomplete="off"/> <span class="icon glyphicon glyphicon-ok"></span> </label> <span>Lorem Ipsum 4</span> </div> <div class="padding-v-xs" data-toggle="buttons"> <label class="btn btn-default btn-xs ico"> <input type="checkbox" name="" value="" autocomplete="off"/> <span class="icon glyphicon glyphicon-ok"></span> </label> <span>Lorem Ipsum 5</span> </div> <div class="padding-v-xs" data-toggle="buttons"> <label class="btn btn-default btn-xs ico"> <input type="checkbox" name="" value="" autocomplete="off"/> <span class="icon glyphicon glyphicon-ok"></span> </label> <span>Lorem Ipsum 6</span> </div> <div class="padding-v-xs" data-toggle="buttons"> <label class="btn btn-default btn-xs ico"> <input type="checkbox" name="" value="" autocomplete="off"/> <span class="icon glyphicon glyphicon-ok"></span> </label> <span>Lorem Ipsum 7</span> </div> <div class="padding-v-xs" data-toggle="buttons"> <label class="btn btn-default btn-xs ico"> <input type="checkbox" name="" value="" autocomplete="off"/> <span class="icon glyphicon glyphicon-ok"></span> </label> <span>Lorem Ipsum 8</span> </div> <div class="padding-v-xs" data-toggle="buttons"> <label class="btn btn-default btn-xs ico"> <input type="checkbox" name="" value="" autocomplete="off"/> <span class="icon glyphicon glyphicon-ok"></span> </label> <span>Lorem Ipsum 9</span> </div> <div class="padding-v-xs" data-toggle="buttons"> <label class="btn btn-default btn-xs ico"> <input type="checkbox" name="" value="" autocomplete="off"/> <span class="icon glyphicon glyphicon-ok"></span> </label> <span>Lorem Ipsum 10</span> </div> <div class="padding-v-xs" data-toggle="buttons"> <label class="btn btn-default btn-xs ico"> <input type="checkbox" name="" value="" autocomplete="off"/> <span class="icon glyphicon glyphicon-ok"></span> </label> <span>Lorem Ipsum 11</span> </div> <div class="padding-v-xs" data-toggle="buttons"> <label class="btn btn-default btn-xs ico"> <input type="checkbox" name="" value="" autocomplete="off"/> <span class="icon glyphicon glyphicon-ok"></span> </label> <span>Lorem Ipsum 12</span> </div> </div> <hr class="line"/> <label>Lorem Ipsum</label> <a class="pull-right collapsed-icon-toggle" href="#coll-3" data-toggle="collapse"> <span class="glyphicon glyphicon-minus on-opened"></span> <span class="glyphicon glyphicon-plus on-closed"></span> </a> <br/> <div id="coll-3" class="scroll-v-250px collapse in"> <div class="padding-v-xs" data-toggle="buttons"> <label class="btn btn-default btn-xs ico"> <input type="checkbox" name="" value="" autocomplete="off"/> <span class="icon glyphicon glyphicon-ok"></span> </label> <span>Lorem Ipsum 1</span> </div> </div> <hr class="line"/> <label>Lorem Ipsum</label> <a class="pull-right collapsed-icon-toggle" href="#coll-4" data-toggle="collapse"> <span class="glyphicon glyphicon-minus on-opened"></span> <span class="glyphicon glyphicon-plus on-closed"></span> </a> <br/> <div id="coll-4" class="scroll-v-250px collapse in"> <div class="padding-v-xs" data-toggle="buttons"> <label class="btn btn-default btn-xs ico"> <input type="checkbox" name="" value="" autocomplete="off"/> <span class="icon glyphicon glyphicon-ok"></span> </label> <span>Lorem Ipsum 1</span> </div> </div> <hr class="line"/> <button type="submit" class="btn btn-block btn-success"> <span class="glyphicon glyphicon-search"></span> </button> </form> </div> </div> </div> </div> </div>

.collapsed-icon-toggle.collapsed .on-closed { display: initial; } .collapsed-icon-toggle.collapsed .on-opened { display: none; } .collapsed-icon-toggle .on-closed { display: none; } .collapsed-icon-toggle .on-opened { display: initial; } .scroll-v-250px { max-height: 250px; overflow-y: scroll; } .padding-v-xs { padding-top: 2px; padding-bottom: 2px; } .btn.ico span.icon { opacity: 0; } .btn.ico.active span.icon { opacity: 1; }