body
  dl.p-accordion
    dt.p-accordion__trigger.js-accordion-trigger title
    dd.p-accordion__body dammy text
    dt.p-accordion__trigger.js-accordion-trigger title
    dd.p-accordion__body dammy text
    dt.p-accordion__trigger.js-accordion-trigger title
    dd.p-accordion__body dammy text
View Compiled
* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  background-color: #ddd;
}

.p-accordion {
  max-width: 360px;
  width: 100%;
  &__trigger {
    background-color: #e60012;
    color: #fff ;
    padding: .6em 1em;
    position: relative;
    cursor: pointer;
    &::before,
    &::after {
      content: '';
      display: block;
      background-color: #fff;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    &::before {
      width: 12px;
      height: 2px;
      right: 1em;
    }
    &::after {
      width: 2px;
      height: 12px;
      right: 1.3em;
      transition: opacity .36s;
    }
    &.is-active::after {
      opacity: 0;
    }
  }
  &__body {
    background-color: #fff;
    padding: 0 1em;
    line-height: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: padding .36s, opacity .36s;
    &.is-open {
      padding: .6em 1em;
      line-height: normal;
      height: auto;
      opacity: 1;
    }
  }
}
View Compiled

var trigger = document.querySelectorAll('.js-accordion-trigger');

for (var i = 0; i < trigger.length; i++) {
  trigger[i].addEventListener('click', function() {
    var body = this.nextElementSibling;
    if (this.classList.contains('is-active')) {
      this.classList.remove('is-active');
      body.classList.remove('is-open');
    } else {
      this.classList.add('is-active');
      body.classList.add('is-open');
    }
  });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.