Show more

Show more without slice()

The classic antipattern hides items by slicing an array in JS (slice(0, n)) and re-renders the list on every click. Same result, in pure CSS:

The JS antipattern

// Antipatrón: ocultar elementos cortando un array con JS
let visibles = items.slice(0, 3);   // estado inicial
visibles = items.slice(0, 6);      // al hacer click en "Ver más"

// Cada click re-renderiza la lista entera desde JS
btn.onclick = () => {
  visibles = items.slice(0, visibles.length + 3);
  render();
};

Pure CSS with :has()

A hidden <input type="checkbox"> drives visibility. :has(:checked) reveals the extra items and swaps the label — no JavaScript at all.

Why it matters

Less JS shipped, state lives in the DOM, and the content is already in the HTML (better for SEO and screen readers) instead of being injected by script.