<div class="accordion-container">
  <dt class="title">タイトル1</dt>
  <dd class="contents">コンテンツ1</dd>
  <dt class="title">タイトル2</dt>
  <dd class="contents">コンテンツ2</dd>
  <dt class="title">タイトル3</dt>
  <dd class="contents">コンテンツ3</dd>
  <dt class="title">タイトル4</dt>
  <dd class="contents">コンテンツ4</dd>
</div>

.accordion-container .contents {
  display: none;
}

.accordion-container .active {
  font-weight: bold;
}

dt.title {
  padding: 1rem 1.5rem;
  background-color: #eee;
  font-weight: normal;
  cursor: pointer;
  user-select: none;
}

dd.contents {
  padding: 1rem 1.5rem;
  margin: 0;
}

document.addEventListener("DOMContentLoaded", () => {
  const accordionContainers = document.querySelectorAll(".accordion-container");

  accordionContainers.forEach((container) => {
    const dts = container.querySelectorAll("dt");

    dts.forEach((dt) => {
      dt.addEventListener("click", () => {
        dt.classList.toggle("active");
        const dd = dt.nextElementSibling;
        dd.style.display =
          window.getComputedStyle(dd).display === "none" ? "block" : "none";
      });
    });
  });
});