アコーディオンメニュー
（ GSAP ）

const AccordionGSAP = () => {
  const accordionBody = document.querySelectorAll('.js-accordion');
  accordionBody.forEach((elem) => {
    const head = elem.querySelector('.js-accordion-head');
    const content = elem.querySelector('.js-accordion-main');
    const IS_OPENED_CLASS = 'is-opened'; // アイコン操作用のクラス名
       if (!(head && content)) return;
    const closingAnim = (_content, _elem) =>
       /**
       * 閉じるとき
       */
      gsap.to(_content, {
        height: '0',
        opacity: 0,
        duration: 0.25,
        ease: 'ease',
        overwrite: true,
        onComplete: () => {
          _elem.removeAttribute('open');
        },
      });

    const openingAnim = (_content) =>
       /**
       * 開くとき
       */
      gsap.fromTo(
        _content,
        {
          height: '0',
          opacity: 0,
        },
        {
          height: 'auto',
          opacity: 1,
          duration: 0.25,
          ease: 'ease',
          overwrite: true,
        }
      );

    head.addEventListener('click', (event) => {
      event.preventDefault();
      if (elem.classList.contains(IS_OPENED_CLASS)) {
        elem.classList.toggle(IS_OPENED_CLASS);

        closingAnim(content, elem).restart();
      } else {
        elem.classList.toggle(IS_OPENED_CLASS);
        elem.setAttribute('open', 'true');
        openingAnim(content).restart();
      }
    });
  });
};

AccordionGSAP();

.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（GSAP）</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>