<div class="container">
<div class="row text-center mt-5 pt-5 pb-5">
<div class="col-lg-8 col-md-12 ml-auto mr-auto">
<div class="section-title">
<h6>Accordion</h6>
<h2 class="title">Frequently asked questions</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 ml-auto">
<div id="accordion" class="accordion style-1">
<div class="card">
<div class="card-header">
<h6 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" class="collapsed"><span></span>consectetur adipisicing elit, sed ?</a>
</h6>
</div>
<div id="collapse1" class="collapse" data-parent="#accordion" style="">
<div class="card-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodas temporo incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h6 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2" class="collapsed" aria-expanded="false"><span></span>temporo incididunt ut labore et dolore ?</a>
</h6>
</div>
<div id="collapse2" class="collapse" data-parent="#accordion" style="">
<div class="card-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodas temporo incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</div>
</div>
<div class="card active">
<div class="card-header">
<h6 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3" class="" aria-expanded="true"><span></span>quis nostrd exercitation ullamco laboris ?</a>
</h6>
</div>
<div id="collapse3" class="collapse show" data-parent="#accordion" style="">
<div class="card-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodas temporo incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h6 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4" class="collapsed" aria-expanded="false"><span></span>Sed do eiusmodas temporo incididunt ?</a>
</h6>
</div>
<div id="collapse4" class="collapse" data-parent="#accordion">
<div class="card-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodas temporo incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h6 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5" class="collapsed" aria-expanded="false"><span></span>Nostrd exercitation ullamco laboris ?</a>
</h6>
</div>
<div id="collapse5" class="collapse" data-parent="#accordion">
<div class="card-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodas temporo incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h6 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6" class="collapsed" aria-expanded="false"><span></span>laboris nostrd exercitation ullamco ?</a>
</h6>
</div>
<div id="collapse6" class="collapse" data-parent="#accordion">
<div class="card-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodas temporo incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
body { background: #f1f1f1;}
.accordion .card {border: none; border-radius: 0; margin-bottom: 20px; overflow: inherit;}
.accordion .card:last-child{margin-bottom: 0;}
.accordion .card-header {background: none; border:none; position: relative; padding: 0;}
.accordion .card-header a{padding: 20px 30px 20px 20px; border-radius: 7px; background: #ffffff; font-weight: 600; font-size: 15px; color: #1c1d3e; text-transform: capitalize; display: inline-block; width: 100%;}
.accordion .card.active a, .accordion .card a:hover{background: #2575fc; color: #ffffff}
.accordion .card-body {padding: 30px;}
.accordion .card-header a span:after,
.accordion .card-header a span:before,
.accordion .card-header a span {content: ''; position: absolute; left: 20px; top: 50%;}
.accordion .card-header a span:before,
.accordion .card-header a span:after {width: 20px; height: 2px; background: #2575fc; top: 50%; left: 50%; -webkit-transform: translate(-50%); transform: translate(-50%)}
.accordion .card-header a span:before {-webkit-transform: translate(-50%) rotate(90deg); transform: translate(-50%) rotate(90deg)}
.accordion .card-header a span{left: inherit; right: 30px;}
.accordion .card-header a[aria-expanded="true"] span:before {-webkit-transform: translate(-50%) rotate(0deg); transform: translate(-50%) rotate(0deg)}
.accordion .card.active a span:after, .accordion .card a:hover span:after,
.accordion .card.active a span:before, .accordion .card a:hover span:before{background: #ffffff;}
.dark-bg .accordion .card{background: rgba(0,0,0,0.2);}
.dark-bg .accordion .card-header a{color: rgba(255,255,255,0.5);}
.dark-bg .accordion .card.active a, .dark-bg .accordion .card a:hover{color: #2575fc;}
</style>