"Collapse Filters Search"
Bootstrap 3.3.0 Snippet by BehroozHamedani

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 ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-3">
<div id="accordion" class="panel panel-primary behclick-panel">
<div class="panel-heading">
<h3 class="panel-title">Search Filter Car</h3>
</div>
<div class="panel-body" >
<div class="panel-heading " >
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse0">
<i class="indicator fa fa-caret-down" aria-hidden="true"></i> Price
</a>
</h4>
</div>
<div id="collapse0" class="panel-collapse collapse in" >
<ul class="list-group">
<li class="list-group-item">
<div class="checkbox">
<label>
<input type="checkbox" value="">
0 - 1000$
</label>
</div>
</li>
<li class="list-group-item">
<div class="checkbox" >
<label>
<input type="checkbox" value="">
1000$ - 2000$
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
.behclick-panel .list-group {
margin-bottom: 0px;
}
.behclick-panel .list-group-item:first-child {
border-top-left-radius:0px;
border-top-right-radius:0px;
}
.behclick-panel .list-group-item {
border-right:0px;
border-left:0px;
}
.behclick-panel .list-group-item:last-child{
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
}
.behclick-panel .list-group-item {
padding: 5px;
}
.behclick-panel .panel-heading {
/* padding: 10px 15px;
border-bottom: 1px solid transparent; */
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom: 1px solid darkslategrey;
}
.behclick-panel .panel-heading:last-child{
/* border-bottom: 0px; */
}
.behclick-panel {
border-radius: 0px;
border-right: 0px;
border-left: 0px;
border-bottom: 0px;
box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
}
.behclick-panel .radio, .checkbox {
margin: 0px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find("i.indicator")
.toggleClass('fa-caret-down fa-caret-right');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

I copied html, css, js into my Django project the widget looks the same but when i try to collapse items it never happens. Screen switches to the next item. I made sure html sees css and js. What else could be the problem?

Olexandr () - 8 years ago - Reply 0


i just started learning bootstrap and i had the same issue but now it's working fine. all you have to do is to add jQuery
(http://getbootstrap.com/get...

<script src="https://ajax.googleapis.com..."></script>

hope this work!

Lasitha Uyangoda () - 7 years ago - Reply 0


Found same issue

Sandun Deshapriya () - 8 years ago - Reply 0


My solution to that was click the gear icon and then download the whole snippet (you need to be signed in).

Olexandr () - 8 years ago - Reply 0