FAQアコーディオン

<div class="accordion2">
  <dl class="accordion2__item">
    <dt class="accordion2__ttl">どうしてjQeryではないのですか？</dt>
    <dd class="accordion2__txt">jQueryだと重くなりがちだということと、環境によっては動かないこともあるので、軽量でどこでも誰でもというコンセプトである以上、プレーンなjsで実装しています。</dd>
  </dl>
  <dl class="accordion2__item">
    <dt class="accordion2__ttl">class名が雑じゃないですか？</dt>
    <dd class="accordion2__txt">class名は実際にサイトで使用されるときの用途に合わせて決められるものなので、本サイトではID程度の意味しか持たせておりません。ご自由にご変更ください。</dd>
  </dl>  
  <dl class="accordion2__item">
    <dt class="accordion2__ttl">FAQデザインにまでアニメーションいる？</dt>
    <dd class="accordion2__txt">神は細部に宿ります。アニメーションがいらない理由に根拠がある場合は無しでも構いませんが、惰性だという認識がおありでしたら、ぜひ”神は細部に宿る”という言葉を思い出してください。</dd>
  </dl>      
  <dl class="accordion2__item">
    <dt class="accordion2__ttl">何のために作ったサイトですか？</dt>
    <dd class="accordion2__txt">今これを読んでいるあなたの為のサイトです。</dd>
  </dl>  
</div>

.accordion2 {
  max-width: 500px;
}
.accordion2__item {
  margin-bottom: 10px;
}
.accordion2__item:last-of-type {
  margin-bottom: 0;
}
.accordion2__ttl {
  font-weight: bold;
  padding: 16px 30px 16px 16px;
  border-bottom: solid 2px #C18AC4;
  cursor: pointer;
  position: relative;
}
.accordion2__ttl:before {
  content: "Q";
  color: #C18AC4;
  display: inline-block;
  margin-right: 0.5em;
  font-size: 1.2em;
}
.accordion2__ttl:after {
  display: block;
  content: "";
  position: absolute;
  right: 0.5em;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 0.5em;
  height: 0.5em;
  border-right: solid 2px #C18AC4;
  border-bottom: solid 2px #C18AC4;
  transform: rotate(45deg);
  transition: all ease 1s;
}
.accordion2__ttl.open:after {
  transform: rotate(-135deg);
}
.accordion2__txt {
  font-size: 14px;
  line-height: 2;
  background-color: #F5E8FF;
  opacity: 0;
  padding: 0;
  max-height: 0;
  clip-path: polygon(0 0, 0 0, 0 0);
  transition: max-height .3s ease, padding .3s ease, opacity .3s ease, clip-path 1s .2s ease;
}
.accordion2__txt.open {
  padding: 16px;
  max-height: none;
  opacity: 1;
  clip-path: polygon(0 0, 200% 0, 0 200%);
}

document.addEventListener('DOMContentLoaded', () =>{
  document.querySelectorAll('.accordion2__ttl').forEach((dt) => {
    dt.addEventListener('click',() =>{
      const dd = dt.nextElementSibling;
      dd.classList.toggle('open');
      dt.classList.toggle('open');
    });
  });
});