<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> <li class="list-group-item"> <div class="checkbox" > <label> <input type="checkbox" value=""> 1000$ - 2000$ </label> </div> </li> <li class="list-group-item"> <div class="checkbox" > <label> <input type="checkbox" value=""> 2000$ - 6000$ </label> </div> </li> <li class="list-group-item"> <div class="checkbox" > <label> <input type="checkbox" value=""> More Than 6000$ </label> </div> </li> </ul> </div> <div class="panel-heading " > <h4 class="panel-title"> <a data-toggle="collapse" href="#collapse1"> <i class="indicator fa fa-caret-down" aria-hidden="true"></i> Brand </a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in" > <ul class="list-group"> <li class="list-group-item"> <div class="checkbox"> <label> <input type="checkbox" value=""> citroen </label> </div> </li> <li class="list-group-item"> <div class="checkbox" > <label> <input type="checkbox" value=""> benz </label> </div> </li> <li class="list-group-item"> <div class="checkbox" > <label> <input type="checkbox" value=""> bmw </label> </div> </li> </ul> </div> <div class="panel-heading" > <h4 class="panel-title"> <a data-toggle="collapse" href="#collapse3"><i class="indicator fa fa-caret-down" aria-hidden="true"></i> Color</a> </h4> </div> <div id="collapse3" class="panel-collapse collapse in"> <ul class="list-group"> <li class="list-group-item"> <div class="checkbox"> <label> <input type="checkbox" value=""> red </label> </div> </li> <li class="list-group-item"> <div class="checkbox" > <label> <input type="checkbox" value=""> blue </label> </div> </li> <li class="list-group-item"> <div class="checkbox" > <label> <input type="checkbox" value=""> green </label> </div> </li> </ul> </div> <div class="panel-heading" > <h4 class="panel-title"> <a data-toggle="collapse" href="#collapse2"><i class="indicator fa fa-caret-right" aria-hidden="true"></i> Collapsible list group</a> </h4> </div> <div id="collapse2" class="panel-collapse collapse"> <ul class="list-group"> <li class="list-group-item"> <div class="checkbox"> <label> <input type="checkbox" value=""> 7 </label> </div> </li> <li class="list-group-item"> <div class="checkbox" > <label> <input type="checkbox" value=""> 8 </label> </div> </li> <li class="list-group-item"> <div class="checkbox"> <label> <input type="checkbox" value=""> 9 </label> </div> </li> </ul> </div> </div> </div> </div> </div> </div>

.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; padding-left: 10px; } .behclick-panel .panel-title > a, .panel-title > small, .panel-title > .small, .panel-title > small > a, .panel-title > .small > a { outline: none; } .behclick-panel .panel-body > .panel-heading{ padding:10px 10px; } .behclick-panel .panel-body { padding: 0px; } /* unvisited link */ .behclick-panel a:link { text-decoration:none; } /* visited link */ .behclick-panel a:visited { text-decoration:none; } /* mouse over link */ .behclick-panel a:hover { text-decoration:none; } /* selected link */ .behclick-panel a:active { text-decoration:none; }

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);