<div class="our-faq-wrapper">
  <div class="container">
    <div class="row">
      <div class="col-md-12">

                        <div class="faq-title text-center pb-3">
                            <h2>FAQ</h2>
                        </div>
                    </div>
      <div class="col-lg-6">
        <div class="accordion" id="accordion">
          <div class="card">
            <div class="card-header" id="headingOne">
              <h5 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Frequently Asked Questions ? </button>
              </h5>
            </div>
            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
              <div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, numquam quis perferendis beatae? Alias reprehenderit ut voluptatem mollitia sit aut eum ratione laudantium soluta ipsam adipisci, molestias delectus iure. Recusandae? </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header" id="headingTwo">
              <h5 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Frequently Asked Questions ? </button>
              </h5>
            </div>
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
              <div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, numquam quis perferendis beatae? Alias reprehenderit ut voluptatem mollitia sit aut eum ratione laudantium soluta ipsam adipisci, molestias delectus iure. Recusandae? </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header" id="headingThree">
              <h5 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Frequently Asked Questions ? </button>
              </h5>
            </div>
            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
              <div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, numquam quis perferendis beatae? Alias reprehenderit ut voluptatem mollitia sit aut eum ratione laudantium soluta ipsam adipisci, molestias delectus iure. Recusandae? </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="accordion" id="accordion2">
          <div class="card">
            <div class="card-header" id="heading4">
              <h5 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse4" aria-expanded="false" aria-controls="collapse4"> Frequently Asked Questions ? </button>
              </h5>
            </div>
            <div id="collapse4" class="collapse" aria-labelledby="heading4" data-parent="#accordion2">
              <div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, numquam quis perferendis beatae? Alias reprehenderit ut voluptatem mollitia sit aut eum ratione laudantium soluta ipsam adipisci, molestias delectus iure. Recusandae? </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header" id="heading5">
              <h5 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse5" aria-expanded="false" aria-controls="collapse5"> Frequently Asked Questions ? </button>
              </h5>
            </div>
            <div id="collapse5" class="collapse" aria-labelledby="heading5" data-parent="#accordion2">
              <div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, numquam quis perferendis beatae? Alias reprehenderit ut voluptatem mollitia sit aut eum ratione laudantium soluta ipsam adipisci, molestias delectus iure. Recusandae? </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header" id="heading6">
              <h5 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse6" aria-expanded="false" aria-controls="collapse6"> Frequently Asked Questions ? </button>
              </h5>
            </div>
            <div id="collapse6" class="collapse show" aria-labelledby="heading6" data-parent="#accordion2">
              <div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, numquam quis perferendis beatae? Alias reprehenderit ut voluptatem mollitia sit aut eum ratione laudantium soluta ipsam adipisci, molestias delectus iure. Recusandae? </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
.our-faq-wrapper {
  float: left;
  width: 100%;
  padding: 89px 0 60px;
  background:#f5f5f5;
}

.our-faq-wrapper {
    padding: 90px 0 60px;
  background:#fff;  
}
.accordion .card {
  border: none;
  margin-bottom: 30px;
}
.our-faq-wrapper .btn-link {
  display: block;
  width: 100%;
  text-align: left;
  position: relative;
  background: #242c42;
  color: #fff;
  border-radius: 0;
  padding: 7px 15px 12px;
  font-size: 16px;
  overflow: hidden;
  border: none;
  font-weight:600;  
}
.our-faq-wrapper .btn-link:hover, .our-faq-wrapper .btn-link:focus {
  text-decoration: none;
}
.our-faq-wrapper .btn-link:after {
  position: absolute;
  content: '\f068';
  right: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-family: fontawesome;
}
.our-faq-wrapper .btn-link.collapsed:after {
  content: '\f067';
}
.our-faq-wrapper .btn-link:before {
  position: absolute;
  content: '';
  background: #86bc42;
  -webkit-transform: skew(-35deg);
  transform: skew(-35deg);
  height: 100%;
  width: 50%;
  left: 90%;
  top: 0;
}
.card-header {
  padding: 0;
  background: transparent;
  border-bottom: none;
}
.card-body {
  position: relative;
}
.card-body:after {
  position: absolute;
  content: '';
  height: 2px;
  width: 100%;
  left: 0;
  bottom: 0;
  background: #242c42;
}
.card-body:before {
  position: absolute;
  content: '';
  height: 2px;
  width: 50%;
  left: 0;
  bottom: 0;
  background: #86bc42;
  z-index: 1;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.1.0.js
  2. https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js