<div class="filter-list">
  <ul id="someidone">
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</li>
    <li>List 5</li>
    <li>List 6</li>
    <li>List 7</li>
    <li>List 8</li>
  </ul>
  <label class="more">See more...</label>
</div>

<div class="filter-list">
  <ul id="someidtwo">
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</li>
    <li>List 5</li>
    <li>List 6</li>
    <li>List 7</li>
    <li>List 8</li>
    <li>List 9</li>
  </ul>
  <label class="more">See more...</label>
</div>

<div class="filter-list">
  <ul id="someidthree">
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</li>
  </ul>
  <label class="more">See more...</label>
</div>
.filter-list ul li:nth-child(n + 6) {
  display: none;
}
.filter-list ul li.showList:nth-child(n + 6) {
  display: list-item;
}
.filter-list label.more {
  color: #f86843;
  font-weight: 600;
  font-style: oblique;
  display: none;
}
.filter-list label.more.showMe {
  display: block;
}
.filter-list .more {
  cursor: pointer;
}
const lists = document.querySelectorAll(".filter-list");
lists.forEach(function (list) {
  const liCount = list.querySelectorAll("li").length;
  if (liCount > 5) {
    list.querySelector(".more").classList.add("showMe");
  }
});

const moreEls = document.querySelectorAll(".more");
moreEls.forEach(function (more) {
  more.addEventListener("click", function (evt) {
    const more = evt.target;
    const ul = more.previousElementSibling;
    ul.querySelector("li").forEach(function (li) {
      li.toggleClass("showList");
    });
    more.innerHTML = more.innerHTML.includes("more")
      ? "See less..."
      : "See more...";
  });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.