Load more list

How to use it

Use for a chronological list such as release notes or activity where people mostly read the newest entries and occasionally want more. When people need to reach a specific page or share a position, use pagination instead; avoid infinite scroll for keyboard users. Replace the in-page array with your data (or fetch it in the click handler), and keep the batch size and the counting noun in the status text in step.

Accessibility

Items are a native <ul> of <li> elements, and Show more is a native <button> that appends the next batch from an in-page array. A polite role="status" line announces "Showing 10 of 20 releases" after each batch; when the last batch is added the button is hidden and focus moves to the first new item (tabindex="-1", programmatic focus only) so it is never dropped on the page body. Item names are #0f172a on white (17.85:1), dates and the count #475569 on white (7.58:1), the button #1d4ed8 on white (6.70:1, 8.01:1 hovered), with a 2px #1d4ed8 focus outline.

Source (copy-ready)

Copy code

<section class="dcl-loadmore" aria-labelledby="dcl-loadmore-title">
  <h2 class="dcl-loadmore__title" id="dcl-loadmore-title">Release notes</h2>
  <ul class="dcl-loadmore__list">
    <li class="dcl-loadmore__item"><span class="dcl-loadmore__name">Version 3.20: Saved searches</span> <span class="dcl-loadmore__date">4 Nov 2026</span></li>
    <li class="dcl-loadmore__item"><span class="dcl-loadmore__name">Version 3.19: Bulk archive</span> <span class="dcl-loadmore__date">28 Oct 2026</span></li>
    <li class="dcl-loadmore__item"><span class="dcl-loadmore__name">Version 3.18: Keyboard shortcuts panel</span> <span class="dcl-loadmore__date">21 Oct 2026</span></li>
    <li class="dcl-loadmore__item"><span class="dcl-loadmore__name">Version 3.17: Faster file previews</span> <span class="dcl-loadmore__date">14 Oct 2026</span></li>
    <li class="dcl-loadmore__item"><span class="dcl-loadmore__name">Version 3.16: Shared folders</span> <span class="dcl-loadmore__date">7 Oct 2026</span></li>
  </ul>
  <p class="dcl-loadmore__status" role="status">Showing 5 of 20 releases</p>
  <button type="button" class="dcl-loadmore__more">Show 5 more</button>
</section>
<style>
.dcl-loadmore { max-width: 32rem; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-loadmore__title { margin: 0 0 0.5rem; font-size: 1.15rem; color: #0f172a; background-color: #ffffff; }
.dcl-loadmore__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #e2e8f0; }
.dcl-loadmore__item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.6rem 0.25rem; border-bottom: 1px solid #e2e8f0; }
.dcl-loadmore__item:focus-visible { outline: 2px solid #1d4ed8; outline-offset: -2px; }
.dcl-loadmore__name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: #0f172a; background-color: #ffffff; }
.dcl-loadmore__date { font-size: 0.9rem; color: #475569; background-color: #ffffff; }
.dcl-loadmore__status { margin: 0.75rem 0 0.5rem; font-size: 0.9rem; color: #475569; background-color: #ffffff; }
.dcl-loadmore__more { padding: 0.45rem 1rem; border: 1px solid #1d4ed8; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer; color: #1d4ed8; background-color: #ffffff; }
.dcl-loadmore__more:hover { color: #1e40af; background-color: #eff6ff; }
.dcl-loadmore__more:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
</style>
<script>
(function () {
  var olderReleases = [
    ["Version 3.15: Two-step sign-in", "30 Sep 2026"],
    ["Version 3.14: CSV export", "23 Sep 2026"],
    ["Version 3.13: Read receipts", "16 Sep 2026"],
    ["Version 3.12: Calendar sync", "9 Sep 2026"],
    ["Version 3.11: Larger text option", "2 Sep 2026"],
    ["Version 3.10: Offline drafts", "26 Aug 2026"],
    ["Version 3.9: Team roles", "19 Aug 2026"],
    ["Version 3.8: Pinned messages", "12 Aug 2026"],
    ["Version 3.7: Weekly summary email", "5 Aug 2026"],
    ["Version 3.6: Custom statuses", "29 Jul 2026"],
    ["Version 3.5: Undo send", "22 Jul 2026"],
    ["Version 3.4: Dark theme", "15 Jul 2026"],
    ["Version 3.3: Search filters", "8 Jul 2026"],
    ["Version 3.2: Labels", "1 Jul 2026"],
    ["Version 3.1: First public release", "24 Jun 2026"]
  ];
  var batchSize = 5;
  document.querySelectorAll(".dcl-loadmore").forEach(function (root) {
    if (root.dataset.dclBound) { return; }
    root.dataset.dclBound = "true";
    var list = root.querySelector(".dcl-loadmore__list");
    var status = root.querySelector(".dcl-loadmore__status");
    var button = root.querySelector(".dcl-loadmore__more");
    if (!list || !button) { return; }
    var next = 0;
    var total = list.children.length + olderReleases.length;
    function update() {
      var remaining = olderReleases.length - next;
      if (status) { status.textContent = "Showing " + list.children.length + " of " + total + " releases"; }
      button.hidden = remaining <= 0;
      button.textContent = "Show " + Math.min(batchSize, remaining) + " more";
    }
    button.addEventListener("click", function () {
      var firstNew = null;
      olderReleases.slice(next, next + batchSize).forEach(function (entry) {
        var item = document.createElement("li");
        item.className = "dcl-loadmore__item";
        var name = document.createElement("span");
        name.className = "dcl-loadmore__name";
        name.textContent = entry[0];
        var date = document.createElement("span");
        date.className = "dcl-loadmore__date";
        date.textContent = entry[1];
        item.appendChild(name);
        item.appendChild(document.createTextNode(" "));
        item.appendChild(date);
        list.appendChild(item);
        if (!firstNew) { firstNew = item; }
      });
      next += batchSize;
      update();
      if (button.hidden && firstNew) {
        firstNew.tabIndex = -1;
        firstNew.focus();
      }
    });
    update();
  });
})();
</script>