<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container" 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> <div class="clearfix"></div> <div class="slide-wrapper filter-wrapper"> <div class="panel panel-default no-rounded noborder mb-0"> <div class="panel-body"> <ul class="list-inline"> <li> <div class="dropdown"> <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown">Dropdown <span class="caret"></span></button> <ul class="dropdown-menu p-10"> <li> <div class="input-group c-search"> <input type="text" class="form-control" id="contact-list-search"> <span class="input-group-btn"> <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search text-muted"></span></button> </span> </div> </li> <li> <div class="checkbox"> <label><input type="checkbox" value="">Option 1</label> </div> </li> <li> <div class="checkbox"> <label><input type="checkbox" value="">Option 1</label> </div> </li> </ul> </div> </li> <li> <div class="dropdown"> <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown">Dropdown <span class="caret"></span></button> <ul class="dropdown-menu p-10"> <li> <div class="input-group c-search"> <input type="text" class="form-control" id="contact-list-search"> <span class="input-group-btn"> <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search text-muted"></span></button> </span> </div> </li> <li> <div class="checkbox"> <label><input type="checkbox" value="">Option 1</label> </div> </li> <li> <div class="checkbox"> <label><input type="checkbox" value="">Option 1</label> </div> </li> </ul> </div> </li> <li> <div class="dropdown"> <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown">Dropdown <span class="caret"></span></button> <ul class="dropdown-menu p-10"> <li> <div class="input-group c-search"> <input type="text" class="form-control" id="contact-list-search"> <span class="input-group-btn"> <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search text-muted"></span></button> </span> </div> </li> <li> <div class="checkbox"> <label><input type="checkbox" value="">Option 1</label> </div> </li> <li> <div class="checkbox"> <label><input type="checkbox" value="">Option 1</label> </div> </li> </ul> </div> </li> <li> <div class="dropdown"> <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown">Dropdown <span class="caret"></span></button> <ul class="dropdown-menu p-10"> <li> <div class="input-group c-search"> <input type="text" class="form-control" id="contact-list-search"> <span class="input-group-btn"> <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search text-muted"></span></button> </span> </div> </li> <li> <div class="checkbox"> <label><input type="checkbox" value="">Option 1</label> </div> </li> <li> <div class="checkbox"> <label><input type="checkbox" value="">Option 1</label> </div> </li> </ul> </div> </li> <li><div class="dropdown"> <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown">Dropdown <span class="caret"></span></button> <ul class="dropdown-menu p-10"> <li> <div class="input-group c-search"> <input type="text" class="form-control" id="contact-list-search"> <span class="input-group-btn"> <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search text-muted"></span></button> </span> </div> </li> <li> <div class="checkbox"> <label><input type="checkbox" value="">Option 1</label> </div> </li> <li> <div class="checkbox"> <label><input type="checkbox" value="">Option 1</label> </div> </li> </ul> </div></li> <li><a class="btn btn-link" href="#">Clear filter</a></li> </ul> </div> </div> </div> </div> <div class="row"> <div class="form-group"> <label for="profileUrl">Your profile URL</label> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text border-0 rounded-0">http://</span> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">my.</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">private.</a> <a class="dropdown-item" href="#">own.</a> </div> </div> <input type="text" id="profileUrl" class="form-control"> <div class="input-group-append"> <span class="input-group-text border-0 rounded-0">.example.com</span> </div> </div> </div> </div> </div>

#toggle { text-align:left; } .slide-wrapper { background-color:#fff; border:1px solid #dbdbdb; color:#fff; padding:0; display:none; } .no-rounded{border-radius:0;} .icon-2x {font-size:3rem;position:relative;top:-7px;} .filter-wrapper .dropdown-menu{padding:10px;} .bg-iconbutton { background: #f2f2f2; border-radius: 100%; font-weight: normal; line-height: normal; padding: 9px; margin-left: 10px; } .mb-0{margin-bottom:0;} .filter-wrapper select{ background: #efefef; border: none; border-radius: 0; box-shadow: none;} .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"); }); });