<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 well" id="toggle"> <div class="row"> <a href="#" class="btn btn-link filter-btn pull-left"><span class="glyphicon glyphicon-filter gly"></span> Exclusive Filter</a> <ul class="list-inline"> <li><a href="#" class="btn btn-default"><span>Filter 1</span> <i class="glyphicon glyphicon-remove"></i></a></li> <li><a href="#" class="btn btn-default"><span>Filter 1</span> <i class="glyphicon glyphicon-remove"></i></a></li> <li><a href="#" class="btn btn-default"><span>Filter 1</span> <i class="glyphicon glyphicon-remove"></i></a></li> <li><a href="#" class="btn btn-default"><span>Filter 1</span> <i class="glyphicon glyphicon-remove"></i></a></li> <li><a href="#" class="btn btn-default"><span>Filter 1</span> <i class="glyphicon glyphicon-remove"></i></a></li> </ul> <div class="slide-wrapper"> <div class="panel panel-default no-rounded noborder"> <div class="panel-heading">Filter <a href="#" class="close"><span class="icon-2x" aria-hidden="true">×</span></a></div> <div class="panel-body"> <div class="row"> <div class="col-md-12"> <form class="form-inline"> <div class="form-group"> <div class="input-group"> <input type="text" class="form-control " id="exampleInputAmount" placeholder="Enter your text"> </div> </div> <a href="#" class="btn bg-iconbutton"><span class="glyphicon glyphicon-plus"></span></a> </form> </div> </div> </div> <div class="panel-footer text-right noborder"> <button type="submit" class="btn btn-primary">SAVE</button> </div> </div> <form> <div class="row"> <div class="col-md-4"> <div class="form-group has-feedback has-clear"> <label for="exampleInputEmail1">Name</label> <input type="text" class="form-control no-rounded" id="exampleInput1" placeholder="Enter text here"> <span class="form-control-clear glyphicon glyphicon-remove form-control-feedback hidden"></span> </div> </div> <div class="col-md-4"> <div class="form-group has-feedback has-clear"> <label for="exampleInputEmail1">Name</label> <input type="text" class="form-control no-rounded" id="exampleInput1" placeholder="Enter text here"> <span class="form-control-clear glyphicon glyphicon-remove form-control-feedback hidden"></span> </div> </div> <div class="col-md-4"> <div class="form-group has-feedback has-clear"> <label for="exampleInputEmail1">Name</label> <input type="text" class="form-control no-rounded" id="exampleInput1" placeholder="Enter text here"> <span class="form-control-clear glyphicon glyphicon-remove form-control-feedback hidden"></span> </div> </div> <div class="col-md-4"> <div class="form-group has-feedback has-clear"> <label for="exampleInputEmail1">Name</label> <input type="text" class="form-control no-rounded" id="exampleInput1" placeholder="Enter text here"> <span class="form-control-clear glyphicon glyphicon-remove form-control-feedback hidden"></span> </div> </div> <div class="col-md-4"> <div class="form-group has-feedback has-clear"> <label for="exampleInputEmail1">Name</label> <input type="text" class="form-control no-rounded" id="exampleInput1" placeholder="Enter text here"> <span class="form-control-clear glyphicon glyphicon-remove form-control-feedback hidden"></span> </div> </div> <div class="col-md-4"> <div class="form-group has-feedback has-clear"> <label for="exampleInputEmail1">Name</label> <input type="text" class="form-control no-rounded" id="exampleInput1" placeholder="Enter text here"> <span class="form-control-clear glyphicon glyphicon-remove form-control-feedback hidden"></span> </div> </div> </div> <div class="row"> <div class="col-md-12"> <button type="submit" class="btn btn-primary pull-right">SAVE</button> </div> </div> </form> </div> </div> </div>

#toggle { text-align:left; } .slide-wrapper { background-color:#fff; border:1px solid #666; color:#fff; padding:30px; display:none; } .no-rounded{border-radius:0;} .icon-2x {font-size:3rem;position:relative;top:-7px;} .bg-iconbutton { background: #f2f2f2; border-radius: 100%; font-weight: normal; line-height: normal; padding: 9px; margin-left: 10px; } .panel.noborder { border: none; box-shadow: none; background-color:transparent; } .panel.noborder > .panel-heading { border-bottom: 1px solid #ddd; border-radius: 0; background-color:transparent; } .panel.noborder > .panel-footer { border-bottom:none; border-top:none; border-radius: 0; background-color:transparent; } ::-ms-clear { display: none; } label{color:#6666;} .form-control-clear { z-index: 10; pointer-events: auto; cursor: pointer; color: #666; } .btn-primary{ border: none; background: #2196f3; border-radius: 0; padding: 6px 30px; }

$(document).ready(function(){ $(".filter-btn").click(function(){ $(".slide-wrapper").slideToggle("slow"); }); $('.has-clear input[type="text"]').on('input propertychange', function() { var $this = $(this); var visible = Boolean($this.val()); $this.siblings('.form-control-clear').toggleClass('hidden', !visible); }).trigger('propertychange'); $('.form-control-clear').click(function() { $(this).siblings('input[type="text"]').val('') .trigger('propertychange').focus(); }); });