<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;
}
var liCount;
$(document).ready(function () {
  $(".filter-list ul").each(function () {
    liCount = $(this).children("li").length;
    if (liCount > 5) {
      $(this).next(".more").addClass("showMe");
    }
  });

  $(".more").click(function () {
    $(this).prev("ul").find("li").addClass("showList");
  });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js