<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
main link http://bootsnipp.com/snippets/Veob
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<div class="container ">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="toggle" href="#collapseOne">
<i class="fa fa-minus"></i> Locality
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, voluptas, magnam, officiis, veritatis rerum amet enim in repellendus quae reprehenderit aut ipsum corporis dolore maxime cumque labore incidunt ad iusto maiores error doloribus. Similique, sequi, laboriosam voluptatum omnis nobis incidunt exercitationem facilis voluptatibus maxime harum accusantium tempore magni voluptate qui velit fugit iste quis aut possimus a praesentium ad in quia. Necessitatibus, excepturi, iste, quisquam expedita ratione quibusdam in ex nobis omnis odit voluptates veritatis recusandae sit. Adipisci perspiciatis laudantium vitae quaerat. Porro, mollitia, sequi cupiditate ratione cumque aut laboriosam fuga et nostrum officia. Expedita, vitae officia recusandae eius assumenda.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="toggle" href="#collapseTwo">
<i class="fa fa-minus"></i> Property Type
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse in">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, voluptas, magnam, officiis, veritatis rerum amet enim in repellendus quae reprehenderit aut ipsum corporis dolore maxime cumque labore incidunt ad iusto maiores error doloribus. Similique, sequi, laboriosam voluptatum omnis nobis incidunt exercitationem facilis voluptatibus maxime harum accusantium tempore magni voluptate qui velit fugit iste quis aut possimus a praesentium ad in quia. Necessitatibus, excepturi, iste, quisquam expedita ratione quibusdam in ex nobis omnis odit voluptates veritatis recusandae sit. Adipisci perspiciatis laudantium vitae quaerat. Porro, mollitia, sequi cupiditate ratione cumque aut laboriosam fuga et nostrum officia. Expedita, vitae officia recusandae eius assumenda.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="toggle" href="#collapseThree">
<i class="fa fa-minus"></i> Property Budget
</a>
</div>
<div id="collapseThree" class="accordion-body collapse in">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, voluptas, magnam, officiis, veritatis rerum amet enim in repellendus quae reprehenderit aut ipsum corporis dolore maxime cumque labore incidunt ad iusto maiores error doloribus. Similique, sequi, laboriosam voluptatum omnis nobis incidunt exercitationem facilis voluptatibus maxime harum accusantium tempore magni voluptate qui velit fugit iste quis aut possimus a praesentium ad in quia. Necessitatibus, excepturi, iste, quisquam expedita ratione quibusdam in ex nobis omnis odit voluptates veritatis recusandae sit. Adipisci perspiciatis laudantium vitae quaerat. Porro, mollitia, sequi cupiditate ratione cumque aut laboriosam fuga et nostrum officia. Expedita, vitae officia recusandae eius assumenda.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.hr{margin:5px 0;}
.accordion-group{margin-bottom:10px;border-radius:0;}
.accordion-toggle{
background:rgb(248, 251, 252);
}
.accordion-toggle:hover{
text-decoration: none;
}
.accordion-heading .accordion-toggle {
display: block;
padding: 8px 15px;
}
.selectStyle{
width:46%; float: left; margin-right: 8%;
}
.accordion-group{
margin-bottom:20px;
}
// accordion pluse minus goes here
jQuery('.accordion-toggle').click(function(){
var has = jQuery(this);
if(has.hasClass('collapsed')){
jQuery(this).find('i').removeClass('fa-plus');
jQuery(this).find('i').addClass('fa-minus');
}
else{
jQuery(this).find('i').removeClass('fa-minus');
jQuery(this).find('i').addClass('fa-plus');
}
})
