【JavaScript】要素が一定数以上ある場合に省略表示する方法

<ul id="list">
  <li>アイテム1</li>
  <li>アイテム2</li>
  <!-- ...省略... -->
  <li>アイテム8</li>
</ul>
<button id="toggle" type="button" aria-expanded="false">もっと見る</button>

const list = document.getElementById("list");
const button = document.getElementById("toggle");
const VISIBLE = 5;       // 最初に見せる件数
let expanded = false;

function update() {
  const items = list.children;
  for (let i = 0; i < items.length; i++) {
    items[i].style.display = expanded || i < VISIBLE ? "" : "none";
  }
  const rest = items.length - VISIBLE;
  button.textContent = expanded ? "閉じる" : `もっと見る（残り${rest}件）`;
  button.setAttribute("aria-expanded", String(expanded)); // 状態を支援技術へ
  button.style.display = items.length > VISIBLE ? "" : "none"; // 少なければボタン不要
}

button.addEventListener("click", () => {
  expanded = !expanded;
  update();
});

update(); // 初期表示

.clamp-box {
  max-height: 120px;
  overflow: hidden;
  position: relative;
}
/* 下部にフェードをかけて続きを示す */
.clamp-box::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40px;
  background: linear-gradient(rgba(255,255,255,0), #fff);
}
.clamp-box.is-open { max-height: none; }     /* 展開時 */
.clamp-box.is-open::after { display: none; }

/* 1行で省略（…） */
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 3行で省略 */
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}