アコーディオンメニュー
（ Web Animations API ）

const AccordionAnimation = () => {
  const accordionBody = document.querySelectorAll('.js-accordion');
  const RUNNING_VALUE = 'running';
  const IS_OPENED_CLASS = 'is-opened'; // アイコン操作用のクラス名
  accordionBody.forEach((elem) => {
    const head = elem.querySelector('.js-accordion-head');
    const content = elem.querySelector('.js-accordion-main');
    if (!(head && content)) return;

    head.addEventListener('click', (event) => {
      // デフォルトの挙動を無効化
      event.preventDefault();
      // データ属性に"running"があれば処理終了
      if (elem.dataset.animStatus === RUNNING_VALUE) return;
   
      const animTiming = {
        duration: 250,
        easing: 'ease',
      };
      /**
       * 閉じるときのキーフレーム
       */
      const closingAnimKeyframes = (_content) => [
        {
          height: `${_content.scrollHeight}px`, 
          opacity: 1,
        },
        {
          height: 0,
          opacity: 0,
        },
      ];
      /**
       * 開くときのキーフレーム
       */
      const openingAnimKeyframes = (_content) => [
        {
          height: 0,
          opacity: 0,
        },
        {
          height: `${_content.scrollHeight}px`,
          opacity: 1,
        },
      ];
      if (elem.hasAttribute('open')) {
        const closingAnim = content.animate(closingAnimKeyframes(content), animTiming);
        // アニメーション実行中はdata属性に"running"をつける
        elem.dataset.animStatus = RUNNING_VALUE;
        elem.classList.toggle(IS_OPENED_CLASS);
        closingAnim.onfinish = () => {
          // アニメーションの完了後にopen属性を取り除く
          elem.removeAttribute('open');
          elem.dataset.animStatus = '';
        };
      } else {
        elem.setAttribute('open', 'true');
        const openingAnim = content.animate(openingAnimKeyframes(content), animTiming);
        elem.dataset.animStatus = RUNNING_VALUE;
        elem.classList.toggle(IS_OPENED_CLASS);
        openingAnim.onfinish = () => {
          elem.dataset.animStatus = '';
        };
      }
    });
  });
};

AccordionAnimation();

.p-accordion {
  max-width: 700px;
  margin-inline: auto;
}
.p-accordion:not(:first-child) {
  margin-top: 40px;
}
.p-accordion-desc {
  font-size: 15px;
  font-weight: 700;
}
.p-accordion__head {
  cursor: pointer;
  background-color: #26a69a;
  display: block;
  color: white;
  padding: 7px 20px;
  margin-top: 10px;
}
.p-accordion__head-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.p-accordion__icon {
  display: block;
  position: relative;
  width: 24px;
  transition: transform 0.25s;
}
.p-accordion__icon:before {
  content: "";
  position: absolute;
  display: block;
  width: 15px;
  height: 2px;
  background-color: #fff;
}
.p-accordion__icon:after {
  content: "";
  position: absolute;
  display: block;
  width: 15px;
  height: 2px;
  background-color: #fff;
}
.p-accordion__icon:before {
  left: 0;
  transform: rotate(45deg);
}
.p-accordion__icon:after {
  right: 0;
  transform: rotate(-45deg);
}

.p-accordion__block.is-opened > .p-accordion__head > .p-accordion__head-inner .p-accordion__icon {
  transform: rotate(-180deg);
}

.p-accordion__head::-webkit-details-marker {
  display: none;
}
.p-accordion__content {
  overflow: hidden;
  background-color: #fff;
}
 .p-accordion__main {
  padding: 20px;
}

<div class="p-accordion ">
   <div class="p-accordion-desc">HTMLとCSS + JavaScript（Web Animations API）</div>
   <details class="p-accordion__block js-accordion">
      <summary class="p-accordion__head js-accordion-head"><span class="p-accordion__head-inner">Human<span class="p-accordion__icon"></span></span></summary>
      <div class="p-accordion__content js-accordion-main">
         <div class="p-accordion__main">A place where people live. The world. The world. The world in which people live and relate to each other. It is also a word that conceptually expresses the fragile and ephemeral state of such human society.</div>
      </div>
   </details>
   <details class="p-accordion__block js-accordion">
      <summary class="p-accordion__head js-accordion-head"><span class="p-accordion__head-inner">Gorilla<span class="p-accordion__icon"></span></span></summary>
      <div class="p-accordion__content js-accordion-main">
         <div class="p-accordion__main">An ape living in Africa. They are very large and strong. They live in small families in tree nests.</div>
      </div>
   </details>
   <details class="p-accordion__block js-accordion">
      <summary class="p-accordion__head js-accordion-head"><span class="p-accordion__head-inner">Chimpanzee<span class="p-accordion__icon"></span></span></summary>
      <div class="p-accordion__content js-accordion-main">
         <div class="p-accordion__main">An ape living in the forests of western and central Africa. They are about 150 cm long and black all over. They form groups, mainly consisting of males. They are cheerful, vocal, and intelligent.</div>
      </div>
   </details>
</div>