Show more

Ver más sin slice()

El antipatrón clásico oculta elementos cortando un array con JS (slice(0, n)) y re-renderiza la lista en cada click. El mismo resultado, con CSS puro:

El antipatrón en JS

// 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();
};

CSS puro con :has()

Un <input type="checkbox"> oculto controla la visibilidad. :has(:checked) revela los ítems extra y swapea el label — sin una línea de JavaScript.

Por qué importa

Menos JS enviado, el estado vive en el DOM y el contenido ya está en el HTML (mejor para SEO y lectores de pantalla) en vez de inyectarse por script.