【JavaScript】指定した要素が一定数以上ある場合にアコーディオンを実装する方法

const items = document.querySelectorAll(".item");
const MAX = 5; // 最初に見せる件数

if (items.length > MAX) {
  // 6件目以降を隠す
  items.forEach((item, index) => {
    if (index >= MAX) item.style.display = "none";
  });
  // …続けてボタンを追加（次の節）
}

const button = document.createElement("button");
button.textContent = "もっと見る";
button.className = "show-more";
button.setAttribute("aria-expanded", "false");

// リストの最後（最後のアイテムの後ろ）に置く
items[items.length - 1].after(button);

let isOpen = false;
button.addEventListener("click", () => {
  isOpen = !isOpen;
  items.forEach((item, index) => {
    if (index >= MAX) item.style.display = isOpen ? "" : "none";
  });
  button.textContent = isOpen ? "閉じる" : "もっと見る";
  button.setAttribute("aria-expanded", String(isOpen));
});

const hidden = items.length - MAX; // 隠れている件数
button.textContent = `もっと見る（あと${hidden}件）`;

button.addEventListener("click", () => {
  isOpen = !isOpen;
  items.forEach((item, index) => {
    if (index >= MAX) item.style.display = isOpen ? "" : "none";
  });
  // 開いているときは「閉じる」、閉じているときは残数を表示
  button.textContent = isOpen ? "閉じる" : `もっと見る（あと${hidden}件）`;
  button.setAttribute("aria-expanded", String(isOpen));
});

<details>
  <summary>もっと見る</summary>
  <ul>
    <li>追加のアイテム1</li>
    <li>追加のアイテム2</li>
  </ul>
</details>

.more-area {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.more-area.open {
  max-height: 500px; /* 中身が収まる十分な値 */
}