<div class="container">

  <!-- For demo purpose -->
  <div class="row py-5">
    <div class="col-lg-9 mx-auto text-white text-center">
      <h1 class="display-4">Bootstrap 4 accordion</h1>
      <p class="lead mb-0">Using Bootstrap 4 card component, build a vertical accrodion with up & down chevrons.</p>
    </div>
  </div><!-- End -->

  <div class="row">
    <div class="col-lg-9 mx-auto">
      <!-- Accordion -->
      <div id="accordionExample" class="accordion shadow">

        <!-- Accordion item 1 -->
        <div class="card">
          <div id="headingOne" class="card-header bg-white shadow-sm border-0">
            <h2 class="mb-0">
              <button type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
                aria-controls="collapseOne"
                class="btn btn-link text-dark font-weight-bold text-uppercase collapsible-link">Collapsible Group Item
                #1</button>
            </h2>
          </div>
          <div id="collapseOne" aria-labelledby="headingOne" data-parent="#accordionExample" class="collapse show">
            <div class="card-body p-5">
              <p class="font-weight-light m-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
                terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck
                quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
                single-origin coffee nulla assumenda shoreditch et.</p>
            </div>
          </div>
        </div><!-- End -->

        <!-- Accordion item 2 -->
        <div class="card">
          <div id="headingTwo" class="card-header bg-white shadow-sm border-0">
            <h2 class="mb-0">
              <button type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false"
                aria-controls="collapseTwo"
                class="btn btn-link collapsed text-dark font-weight-bold text-uppercase collapsible-link">Collapsible
                Group Item #2</button>
            </h2>
          </div>
          <div id="collapseTwo" aria-labelledby="headingTwo" data-parent="#accordionExample" class="collapse">
            <div class="card-body p-5">
              <p class="font-weight-light m-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
                terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck
                quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
                single-origin coffee nulla assumenda shoreditch et.</p>
            </div>
          </div>
        </div><!-- End -->

        <!-- Accordion item 3 -->
        <div class="card">
          <div id="headingThree" class="card-header bg-white shadow-sm border-0">
            <h2 class="mb-0">
              <button type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false"
                aria-controls="collapseThree"
                class="btn btn-link collapsed text-dark font-weight-bold text-uppercase collapsible-link">Collapsible
                Group Item #3</button>
            </h2>
          </div>
          <div id="collapseThree" aria-labelledby="headingThree" data-parent="#accordionExample" class="collapse">
            <div class="card-body p-5">
              <p class="font-weight-light m-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
                terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck
                quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
                single-origin coffee nulla assumenda shoreditch et.</p>
            </div>
          </div>
        </div><!-- End -->

      </div><!-- End -->
    </div>
  </div>
</div>

/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/
.collapsible-link {
  width: 100%;
  position: relative;
  text-align: left;
}

.collapsible-link::before {
  content: "\f107";
  position: absolute;
  top: 50%;
  right: 0.8rem;
  transform: translateY(-50%);
  display: block;
  font-family: "FontAwesome";
  font-size: 1.1rem;
}

.collapsible-link[aria-expanded="true"]::before {
  content: "\f106";
}

/*
*
* ==========================================
* FOR DEMO PURPOSES
* ==========================================
*
*/
body {
  background: #654ea3;
  background: -webkit-linear-gradient(to left, #654ea3, #eaafc8);
  background: linear-gradient(to left, #654ea3, #eaafc8);
  min-height: 100vh;
  padding-bottom: 5rem;
}