Bootstrap Snippet Collapse Filters using HTML CSS Bootstrap Javascript

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/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->
<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>
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

"Collapse Filters"
Bootstrap 4.1.1 Snippet by tapan

Related: See More

Questions / Comments:

"Collapse Filters" Bootstrap 4.1.1 Snippet by tapan

Related: See More

Questions / Comments:

"Collapse Filters"
Bootstrap 4.1.1 Snippet by tapan