<details class="accordion">
  <summary class="accordion__summary">
    <span class="accordion__title">
      アコーディオンタイトル
    </span>
  </summary>
  <div class="accordion__content">
    アコーディオンの内容
  </div>
</details>
summary {
  display: block;
}

summary::-webkit-details-marker {
  display: none;
}

.accordion__title {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 16px;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid #CCC;
}

.accordion__content {
  padding: 16px;
  background: #EFEFEF;
  border: 1px solid #CCC;
}

.accordion__title::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
}

.accordion__title::after {
  animation: 0.3s close-icon forwards;
}
@keyframes close-icon {
  from {
    transform: rotate(0deg);
  }
  to{
    transform: rotate(-45deg);
  }
}

.accordion[open] .accordion__title::after {
  animation: 0.3s open-icon forwards;
}
@keyframes open-icon {
  from {
    transform: rotate(0deg);
  }
  to{
    transform: rotate(45deg);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.