"Slide toggle form with filters"
Bootstrap 3.3.0 Snippet by Salehin

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(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();
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Coming Sssoon Page
login-form
Login Form
Contact Form

Questions / Comments: