← All posts

Tutorials

Auto-expand "show more" and load paginated content

Comment threads, product reviews, documentation and search results love to hide content behind a "Show more" button or split it across endless pages. With a JustZix JavaScript rule you can expand and load all of it automatically, then read in one continuous scroll.

The pattern: click until it disappears

An auto-expand rule does one thing repeatedly: find the button, click it, wait for new content, repeat — until the button is gone. Here is a self-contained version with a safety cap so it can never loop forever.

function autoExpand(selector, maxClicks) {
  var clicks = 0;
  var timer = setInterval(function () {
    var btn = document.querySelector(selector);
    if (!btn || clicks >= maxClicks) {
      clearInterval(timer);
      return;
    }
    btn.click();
    clicks++;
  }, 800);
}

autoExpand('.show-more-button', 50);

The 800ms interval gives the page time to render new items between clicks. Adjust it up for slow sites. The maxClicks cap of 50 prevents runaway loops on infinite feeds.

Match the button by text

If the button has no stable selector, find it by its label instead. This helper returns the first visible element whose text matches.

function findByText(words) {
  var els = document.querySelectorAll('button, a, [role="button"]');
  for (var i = 0; i < els.length; i++) {
    var t = (els[i].textContent || '').trim().toLowerCase();
    for (var j = 0; j < words.length; j++) {
      if (t.indexOf(words[j]) !== -1 && els[i].offsetParent !== null) {
        return els[i];
      }
    }
  }
  return null;
}

var timer = setInterval(function () {
  var btn = findByText(['show more', 'load more', 'view more', 'see more']);
  if (btn) { btn.click(); } else { clearInterval(timer); }
}, 800);

The offsetParent !== null check skips hidden buttons, so the loop ends correctly when the real button is removed.

Expand every collapsed section at once

Documentation pages often use many small toggles (FAQ accordions, code samples). To open them all in one shot, click each toggle that is currently collapsed.

var toggles = document.querySelectorAll('[aria-expanded="false"]');
toggles.forEach(function (t) {
  t.click();
});

The aria-expanded attribute is a web standard, so this works on a wide range of accessible components without site-specific selectors.

Auto-load the next page

For classic numbered pagination, you can pull the next page's items into the current one. This version finds the "next" link, fetches the page with fetch on the same origin, and appends the new list items.

function loadNextPage(listSelector, nextSelector) {
  var next = document.querySelector(nextSelector);
  var list = document.querySelector(listSelector);
  if (!next || !list || !next.href) return;

  fetch(next.href)
    .then(function (r) { return r.text(); })
    .then(function (html) {
      var doc = new DOMParser().parseFromString(html, 'text/html');
      var newList = doc.querySelector(listSelector);
      if (newList) {
        Array.prototype.forEach.call(newList.children, function (item) {
          list.appendChild(item);
        });
      }
    })
    .catch(function () { /* ignore network errors */ });
}

loadNextPage('.results-list', 'a[rel="next"]');

This only requests pages from the same site you are already on — no third-party calls. Wrap it in a loop with a click cap if you want several pages at once.

Practical advice

Find drop-in versions in the ready-made examples, or download JustZix to start automating. If selection is also disabled on the site, see unblock copy and right-click.

Rate this post

No ratings yet — be the first.

Try it yourself

Install JustZix and paste any snippet from this article. Two minutes from zero to a working rule across all your devices.

Get JustZix

Features · How it works · Examples · Use cases