<div id="accordion" class="myaccordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="d-flex align-items-center justify-content-between btn btn-link collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          Undergraduate Studies
          <span class="fa-stack fa-sm">
            <i class="fas fa-circle fa-stack-2x"></i>
            <i class="fas fa-plus fa-stack-1x fa-inverse"></i>
          </span>
        </button>
      </h2>
    </div>
    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        <p>Suspendisse molestie mauris turpis, vel imperdiet libero tempus et. Vivamus nec erat porta elit suscipit laoreet ut eu nulla. Phasellus sagittis magna eu nisi accumsan, at molestie tellus pharetra. Sed at nibh at sem tristique maximus id vel magna. Sed quis vulputate nulla. Mauris rhoncus dolor et placerat finibus. Phasellus venenatis turpis ac ornare viverra.</p>

  <p>Donec porta turpis eget pharetra mattis. Nunc non finibus diam. Quisque enim erat, egestas id posuere quis, facilisis eget neque. Aenean ornare convallis neque eget pharetra. Suspendisse blandit pharetra elit, eget ultrices lorem porta auctor. Nullam malesuada lobortis massa, ac porttitor dui dapibus eget. Vestibulum tincidunt eros id ante consectetur, ut mollis enim posuere. Vivamus aliquet urna ante, et tempor risus facilisis in. Morbi sem tellus, dictum ultrices viverra ut, ornare gravida sapien.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="d-flex align-items-center justify-content-between btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Postgraduate Studies
          <span class="fa-stack fa-2x">
            <i class="fas fa-circle fa-stack-2x"></i>
            <i class="fas fa-plus fa-stack-1x fa-inverse"></i>
          </span>
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a vulputate ligula. Integer elementum finibus arcu, ac faucibus nulla commodo ac. Proin nunc mi, feugiat in rhoncus et, mattis quis enim. Duis metus nulla, cursus et urna eget, bibendum commodo magna. Donec placerat arcu leo, quis ultrices felis blandit sed. Vivamus vehicula urna pretium dapibus dignissim. Vestibulum nibh tellus, sodales ut eros sit amet, fringilla blandit eros. Donec volutpat metus non lorem sodales lobortis. Mauris tincidunt pharetra ultrices.</p>

  <p>ed varius nibh ut neque tincidunt, eu blandit libero hendrerit. Mauris eu diam eget risus vestibulum tincidunt. Integer volutpat, lorem a lobortis egestas, ligula nisl feugiat tortor, sed condimentum nulla ligula at justo. Praesent non est justo. Sed vitae rutrum est. In et risus id sem egestas iaculis nec vitae erat. Donec sed massa a lacus ultrices feugiat. Mauris scelerisque efficitur est, nec tincidunt neque interdum vitae. Donec convallis venenatis nisl eget ullamcorper. Mauris dapibus risus quis sapien varius, vel convallis justo mattis. Curabitur id condimentum turpis. Fusce vitae dui at nunc condimentum congue.</p>

  <p>Vivamus placerat dapibus enim, nec semper massa malesuada eu. Sed ultrices, ex sit amet facilisis faucibus, nunc enim imperdiet enim, eget eleifend nisi dui ut dolor. Integer quam quam, commodo ut elementum non, elementum sit amet tortor. Aliquam malesuada mi id vulputate consectetur. In velit eros, sodales et sem non, ullamcorper rutrum nunc. Praesent nec fermentum neque. Nam at arcu luctus nisl congue vehicula at et odio. Nullam posuere sit amet lacus et ornare. Cras vitae quam tempor diam condimentum ultricies vitae id risus. Nunc euismod porta nulla non consequat. Etiam euismod volutpat vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec scelerisque eu turpis et dictum.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="d-flex align-items-center justify-content-between btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Research
          <span class="fa-stack fa-2x">
            <i class="fas fa-circle fa-stack-2x"></i>
            <i class="fas fa-plus fa-stack-1x fa-inverse"></i>
          </span>
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        <p>ed varius nibh ut neque tincidunt, eu blandit libero hendrerit. Mauris eu diam eget risus vestibulum tincidunt. Integer volutpat, lorem a lobortis egestas, ligula nisl feugiat tortor, sed condimentum nulla ligula at justo. Praesent non est justo. Sed vitae rutrum est. In et risus id sem egestas iaculis nec vitae erat. Donec sed massa a lacus ultrices feugiat. Mauris scelerisque efficitur est, nec tincidunt neque interdum vitae. Donec convallis venenatis nisl eget ullamcorper. Mauris dapibus risus quis sapien varius, vel convallis justo mattis. Curabitur id condimentum turpis. Fusce vitae dui at nunc condimentum congue.</p>
      </div>
    </div>
  </div>
</div>

<div class="container">
    <div class="row">
      <div class="col">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a vulputate ligula. Integer elementum finibus arcu, ac faucibus nulla commodo ac. Proin nunc mi, feugiat in rhoncus et, mattis quis enim. Duis metus nulla, cursus et urna eget, bibendum commodo magna. Donec placerat arcu leo, quis ultrices felis blandit sed. Vivamus vehicula urna pretium dapibus dignissim. Vestibulum nibh tellus, sodales ut eros sit amet, fringilla blandit eros. Donec volutpat metus non lorem sodales lobortis. Mauris tincidunt pharetra ultrices.</p>

  <p>ed varius nibh ut neque tincidunt, eu blandit libero hendrerit. Mauris eu diam eget risus vestibulum tincidunt. Integer volutpat, lorem a lobortis egestas, ligula nisl feugiat tortor, sed condimentum nulla ligula at justo. Praesent non est justo. Sed vitae rutrum est. In et risus id sem egestas iaculis nec vitae erat. Donec sed massa a lacus ultrices feugiat. Mauris scelerisque efficitur est, nec tincidunt neque interdum vitae. Donec convallis venenatis nisl eget ullamcorper. Mauris dapibus risus quis sapien varius, vel convallis justo mattis. Curabitur id condimentum turpis. Fusce vitae dui at nunc condimentum congue.</p>

  <p>Vivamus placerat dapibus enim, nec semper massa malesuada eu. Sed ultrices, ex sit amet facilisis faucibus, nunc enim imperdiet enim, eget eleifend nisi dui ut dolor. Integer quam quam, commodo ut elementum non, elementum sit amet tortor. Aliquam malesuada mi id vulputate consectetur. In velit eros, sodales et sem non, ullamcorper rutrum nunc. Praesent nec fermentum neque. Nam at arcu luctus nisl congue vehicula at et odio. Nullam posuere sit amet lacus et ornare. Cras vitae quam tempor diam condimentum ultricies vitae id risus. Nunc euismod porta nulla non consequat. Etiam euismod volutpat vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec scelerisque eu turpis et dictum.</p>

  <p>Suspendisse molestie mauris turpis, vel imperdiet libero tempus et. Vivamus nec erat porta elit suscipit laoreet ut eu nulla. Phasellus sagittis magna eu nisi accumsan, at molestie tellus pharetra. Sed at nibh at sem tristique maximus id vel magna. Sed quis vulputate nulla. Mauris rhoncus dolor et placerat finibus. Phasellus venenatis turpis ac ornare viverra.</p>

  <p>Donec porta turpis eget pharetra mattis. Nunc non finibus diam. Quisque enim erat, egestas id posuere quis, facilisis eget neque. Aenean ornare convallis neque eget pharetra. Suspendisse blandit pharetra elit, eget ultrices lorem porta auctor. Nullam malesuada lobortis massa, ac porttitor dui dapibus eget. Vestibulum tincidunt eros id ante consectetur, ut mollis enim posuere. Vivamus aliquet urna ante, et tempor risus facilisis in. Morbi sem tellus, dictum ultrices viverra ut, ornare gravida sapien.</p>
    </div>
  </div>
</div>
body {
  background: #F9F9F9;
}

.myaccordion {
  max-width: 500px;
  margin: 50px auto;
  box-shadow: 0 0 1px rgba(0,0,0,0.1);
}

.myaccordion .card,
.myaccordion .card:last-child .card-header {
  border: none;
}

.myaccordion .card-header {
  border-bottom-color: #EDEFF0;
  background: transparent;
}

.myaccordion .fa-stack {
  font-size: 18px;
}

.myaccordion .btn {
  width: 100%;
  font-weight: bold;
  color: #004987;
  padding: 0;
}

.myaccordion .btn-link:hover,
.myaccordion .btn-link:focus {
  text-decoration: none;
}

.myaccordion li + li {
  margin-top: 10px;
}
$("#accordion").on("hide.bs.collapse show.bs.collapse", e => {
  $(e.target)
    .prev()
    .find("i:last-child")
    .toggleClass("fa-minus fa-plus");
});

$("#accordion").on("shown.bs.collapse", e => {
  $("html, body").animate(
    {
      scrollTop: $(e.target)
        .prev()
        .offset().top
    },
    400
  );
});
View Compiled

External CSS

  1. https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css
  2. https://use.fontawesome.com/releases/v5.6.3/css/all.css

External JavaScript

  1. https://code.jquery.com/jquery-3.3.1.min.js
  2. https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js