アコーディオンメニュー
（setTimeoutとclearTimeout）

const Accordion = () => {
  const accordionBody = document.querySelectorAll('.js-accordion');
  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;
    let timeoutId;
    const msM = 250;
    content.style.setProperty('transition', `height ${msM}ms ease`);

    head.addEventListener('click', (event) => {
      // デフォルトの挙動を無効化
      event.preventDefault();

      // 閉じる
      if (elem.hasAttribute('open')) {
        clearTimeout(timeoutId);
        // 'is-opened'クラスを削除
        elem.classList.remove(IS_OPENED_CLASS);
        content.style.height = '';
        timeoutId = setTimeout(() => {
          elem.removeAttribute('open');
        }, msM);
       // 開く
      } else {
        // 'is-opened'クラスを追加
        elem.classList.add(IS_OPENED_CLASS);
        elem.setAttribute('open', 'true');
        content.style.height = `${content.scrollHeight}px`;
      }
    });
  });
};

Accordion();

.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 {
  height: 0;
  overflow: hidden;
  background-color: #fff;
}
 .p-accordion__main {
  padding: 20px;
}

<div class="p-accordion ">
   <div class="p-accordion-desc">HTMLとCSS + JavaScript（setTimeoutとclearTimeout）</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>