September 27, 2021

Bootstrap accordion

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

 

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

 

Leave a Reply

Your email address will not be published. Required fields are marked *