<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <div class="col-md-3"> <div id="accordion"> <div class="card"> <div class="card-header"> <a class="card-link" data-toggle="collapse" href="#collapseOne"> Search by Budget <i class="fa fa-angle-down fa-2x pull-right"></i> </a> </div> <div id="collapseOne" class="collapse show" data-parent="#accordion"> <div class="card-body"> Lorem ipsum.. </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo"> Search by Brand <i class="fa fa-angle-down fa-2x pull-right"></i> </a> </div> <div id="collapseTwo" class="collapse" data-parent="#accordion"> <div class="card-body"> Lorem ipsum.. </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree"> Search by Model <i class="fa fa-angle-down fa-2x pull-right"></i> </a> </div> <div id="collapseThree" class="collapse" data-parent="#accordion"> <div class="card-body"> Lorem ipsum.. </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapsefour"> Search by Model <i class="fa fa-angle-down pull-right"></i> </a> </div> <div id="collapsefour" class="collapse" data-parent="#accordion"> <div class="card-body"> Lorem ipsum.. </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseFive"> Search by Model <i class="fa fa-angle-down pull-right"></i> </a> </div> <div id="collapseFive" class="collapse" data-parent="#accordion"> <div class="card-body"> Lorem ipsum.. </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseSix"> Search by Model <i class="fa fa-angle-down pull-right"></i> </a> </div> <div id="collapseSix" class="collapse" data-parent="#accordion"> <div class="card-body"> Lorem ipsum.. </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseSeven"> Search by Model <i class="fa fa-angle-down pull-right"></i> </a> </div> <div id="collapseSeven" class="collapse" data-parent="#accordion"> <div class="card-body"> Lorem ipsum.. </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseEight"> Search by Model <i class="fa fa-angle-down pull-right"></i> </a> </div> <div id="collapseEight" class="collapse" data-parent="#accordion"> <div class="card-body"> Lorem ipsum.. </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseNine"> Search by Model <i class="fa fa-angle-down pull-right"></i> </a> </div> <div id="collapseNine" class="collapse" data-parent="#accordion"> <div class="card-body"> Lorem ipsum.. </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseTen"> Search by Model <i class="fa fa-angle-down pull-right"></i> </a> </div> <div id="collapseTen" class="collapse" data-parent="#accordion"> <div class="card-body"> Lorem ipsum.. </div> </div> </div> </div> </div>