- var accTitles = {1: 'Collapsible Group Item #1', 2: 'Collapsible Group Item #2', 3: 'Collapsible Group Item #3'}

- var accText = '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.'

mixin loop(id, title)
  div(class="card border-0 rounded-0")
    div(class="card-header p-0" id="heading_"+id)
      h2(class="mb-0 border-bottom")
        button(class="btn btn-link text-white collapsed" type="button" data-toggle="collapse" data-target="#collapse_"+id aria-expanded="false" aria-controls="collapse_"+id)
          = title
          i(class="fa fa-chevron-down")
    div(id="collapse_"+id class="collapse bg-light" aria-labelledby="heading_"+id data-parent="#accordionExample")
      div(class="card-body text-dark")
        | #{accText}

div(class="container d-flex flex-column align-items-center")
  h2(class="text-white text-center mt-5 mb-4") Bootstrap 4 accordion
  p(class="mb-5 text-center text-white")
    | Accordion example using the card component 
    a(class="text-white bg-dark font-weight-bold" href="https://getbootstrap.com/docs/4.5/components/collapse/#accordion-example") bootstrap
  div(class="accordion mb-5" id="accordionExample")
    each val, key in accTitles
      +loop(key, val)
View Compiled
body {
  font-family: var(--font-family-monospace);
  background-image: linear-gradient(to bottom, #a18cd1 0%, #fbc2eb 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.accordion {
  width: 100%;
  @media (min-width:991px) { width: 540px; }
  .card-header {
    background-color: var(--purple);
  }
	.btn-link {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
    padding: 1.125rem 1.5rem;
    &:hover,
    &:focus { text-decoration: none; }
		i {
			transition: all .2s ease;
      &.rotated {
			  transform: rotate(-180deg);
		  }
		}
	}
}
View Compiled
$('.collapse').each( function () {
  if ( !$(this).prev().find('.btn').hasClass('collapsed') ) {
    $(this).prev().find('.btn > i').addClass('rotated');
  }
  $(this).on('show.bs.collapse', function () {
    $(this).prev().find('.btn > i').addClass('rotated');
  }).on('hide.bs.collapse', function () {
    $(this).prev().find('.btn > i').removeClass('rotated');
  });
});

External CSS

  1. https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css

External JavaScript

  1. https://code.jquery.com/jquery-3.5.1.slim.min.js
  2. https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js
  3. https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js