Accordion - ViacomCBS UI Kit

PREVIEW

HTML
SCSS

<div class="accordion__wrapper">
    <h2 class="component-subtitle">Accordion Title</h2>

    <div class="accordion">
        <div class="accordion__header accordion__control" role="button" data-toggle="collapse" data-target="#accordion-0" aria-expanded="false" aria-controls="accordion-0">
            <div class="accordion__title">Accordion Title</div>
            <div class="accordion__icon"></div>
        </div>
        <div class="collapse" id="accordion-0">
            <div class="accordion__panel">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, praesentium deserunt ut molestias tempora non qui facere? Molestiae, voluptas maiores reiciendis optio voluptatum accusamus officiis nam veniam maxime deleniti corporis!</p>
            </div>
        </div>
    </div>

    <div class="accordion">
        <div class="accordion__header accordion__control" role="button" data-toggle="collapse" data-target="#accordion-1" aria-expanded="false" aria-controls="accordion-1">
            <div class="accordion__title">Accordion Title</div>
            <div class="accordion__icon"></div>
        </div>
        <div class="collapse" id="accordion-1">
            <div class="accordion__panel">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, praesentium deserunt ut molestias tempora non qui facere? Molestiae, voluptas maiores reiciendis optio voluptatum accusamus officiis nam veniam maxime deleniti corporis!</p>
            </div>
        </div>
    </div>

    <div class="accordion">
        <div class="accordion__header accordion__control" role="button" data-toggle="collapse" data-target="#accordion-2" aria-expanded="false" aria-controls="accordion-2">
            <div class="accordion__title">Accordion Title</div>
            <div class="accordion__icon"></div>
        </div>
        <div class="collapse" id="accordion-2">
            <div class="accordion__panel">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, praesentium deserunt ut molestias tempora non qui facere? Molestiae, voluptas maiores reiciendis optio voluptatum accusamus officiis nam veniam maxime deleniti corporis!</p>
            </div>
        </div>
    </div>
</div>

.accordion__wrapper {
  margin-bottom: 4rem;
}

.accordion {
  &:not(.accordion--borderless) {
    border-bottom: 1px solid rgba($color-blue-medium, 0.3);
  }
}

.accordion__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion__title {
  .accordion--split > .accordion__header > & {
    flex: 1;
    border-right: 1px solid rgba($color-blue-medium, 0.3);
  }
}

.accordion__icon {
  width: 4rem;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;

  &::after {
    font-family: "FontAwesome";
  }

  .accordion__header[aria-expanded="true"] &::after,
  &[aria-expanded="true"]::after {
    content: "\f068";
  }

  .accordion__header[aria-expanded="false"] &::after,
  &[aria-expanded="false"]::after {
    content: "\f067";
  }
}

.accordion__control {
  color: $color-blue-medium;

  &:hover {
    color: $color-blue-dark;
  }
}