Muestra más elementos con JavaScript sin recargar. Incluye mejora progresiva, lotes de tarjetas y confirmación accesible del resultado.
Mostrar más sin fingir una carga remota
Este botón mostrar más con JavaScript revela elementos que ya existen en el documento. No consulta un servidor ni descarga otra página. Esa diferencia importa al elegir una solución: ocultar cien fotografías no impide necesariamente que el navegador solicite sus archivos. El patrón resulta adecuado para una selección corta de proyectos, preguntas o recursos. Si manejas miles de registros, necesitas paginación real y una estrategia de carga ajustada a ese volumen.
Una lista útil cuando JavaScript falla
Los seis proyectos aparecen en el HTML desde el principio y el botón comienza oculto. Si el script no funciona, la persona sigue viendo la lista completa. Cuando se inicializa correctamente, el código oculta los elementos que quedan fuera del primer lote y muestra el control necesario. Esta mejora progresiva conserva el contenido disponible. No coloques hidden en todos los elementos desde el servidor si no tienes un mecanismo alternativo para recuperarlos.
Código completo para probar en tu navegador
Copia este documento en un archivo index.html, guarda los cambios y ábrelo en el navegador. El ejemplo no requiere bibliotecas.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Botón mostrar más con JavaScript sin recargar la página</title>
<style>
*{box-sizing:border-box}body{font:16px/1.6 system-ui,sans-serif;max-width:900px;margin:2rem auto;padding:1rem;color:#17233b}label{display:block;font-weight:700;margin-top:1rem}input,textarea,select,button{font:inherit;padding:.65rem;max-width:100%}textarea{width:100%}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #173b94;outline-offset:3px}[hidden]{display:none!important}[role=tab][aria-selected=true]{background:#173b94;color:white}[role=tab]{border:1px solid #bdcbe2;border-radius:.5rem}[role=tabpanel]{padding:1rem;border:1px solid #bdcbe2}
</style>
</head>
<body>
<ul id="lista">
<li>Proyecto Aurora</li><li>Proyecto Faro</li><li>Proyecto Loma</li>
<li>Proyecto Olivo</li><li>Proyecto Brisa</li><li>Proyecto Río</li>
</ul>
<button id="mas" type="button" hidden>Mostrar más proyectos</button>
<p id="resultado" role="status"></p>
<script>
const elementos=[...document.querySelectorAll('#lista > li')];
const mas=document.querySelector('#mas');
const resultado=document.querySelector('#resultado');
const lote=3;
let visibles=Math.min(lote,elementos.length);
function pintar(){
elementos.forEach((item,i)=>item.hidden=i>=visibles);
mas.hidden=visibles>=elementos.length;
}
pintar();
mas.addEventListener('click',()=>{
const primero=visibles;
visibles=Math.min(visibles+lote,elementos.length);
pintar();
resultado.textContent='Se muestran '+visibles+' de '+elementos.length+' proyectos.';
if(mas.hidden){
const nuevo=elementos[primero];
nuevo.tabIndex=-1;
nuevo.focus();
}
});
</script>
</body>
</html>Separar el tamaño del lote y el total
lote indica cuántos elementos se añaden en cada pulsación; visibles expresa el número que ya debe presentarse. Math.min evita superar el total cuando el último grupo es más pequeño. Por ejemplo, una lista de ocho elementos con lotes de tres terminará mostrando tres, seis y ocho. El botón desaparece al terminar porque ya no tiene una acción pendiente. No lo dejes activo mostrando un mensaje ambiguo de carga infinita.
Confirmar la cantidad sin mover todo el documento
El estado anuncia cuántos proyectos están visibles después de la interacción. El mensaje no recibe foco y permite continuar explorando. Durante los lotes intermedios el botón conserva su posición de teclado. En el último lote el control desaparece; por eso el ejemplo mueve el foco al primer elemento recién mostrado. Ese elemento recibe tabindex negativo únicamente para permitir la operación programática, sin crear una parada permanente adicional en la secuencia normal.
Adaptarlo a tarjetas con enlaces
Puedes sustituir el texto de cada li por un article con título, resumen y enlace al proyecto. Conserva el selector de hijos directos para no incluir listas interiores entre los elementos controlados. Si prefieres enfocar el enlace del primer proyecto nuevo al terminar, búscalo dentro de ese li y comprueba que exista. Evita asignar tabindex positivo a todas las tarjetas: el orden natural del documento suele ser suficiente y más predecible.
Imágenes, altura y estabilidad visual
Reservar espacio para las imágenes evita saltos cuando aparecen las nuevas tarjetas. Usa dimensiones o aspect-ratio y comprueba object-fit según el tipo de fotografía. loading lazy puede retrasar solicitudes de imágenes que están lejos del área visible, aunque su comportamiento depende del navegador. No presentes el botón como una optimización garantizada del peso total. Comprueba la pestaña Red para saber qué recursos se descargan realmente antes y después de cada interacción.
Qué cambia si los datos llegan de una API
Una versión remota necesita estados de espera, error y fin de resultados. También debe evitar peticiones duplicadas y conservar el siguiente cursor o número de página. No basta con pegar fetch dentro del evento sin revisar esas condiciones. Mientras llega una respuesta puedes desactivar el botón y comunicar la espera. Si falla, mantén la posibilidad de reintentar sin borrar lo que ya se había mostrado. Esta variante local no necesita esa complejidad.
Una prueba con cantidades incómodas
Prueba cero elementos, uno, exactamente tres, cuatro y ocho. La lista vacía no debe dejar un botón inútil. Con cuatro elementos, la última pulsación muestra solamente uno y termina. Después aumenta el zoom y recorre la lista usando Tab. Comprueba que el foco no salta al inicio al desaparecer el control. Si agregas elementos dinámicamente después de inicializar, reconstruye la colección o diseña una actualización explícita: el array original no incorpora nuevos nodos automáticamente.
Contenido visible y búsqueda dentro de la página
Los elementos ocultos no se comportan necesariamente como contenido visible en todas las funciones del navegador. Si alguien utiliza la búsqueda de la página o llega mediante un enlace a una tarjeta escondida, necesita una forma de encontrarla. Para catálogos donde esa navegación es importante, una lista completa o una paginación con direcciones puede resultar más adecuada. No ocultes información esencial solamente para reducir la altura inicial. El patrón Mostrar más debe servir al recorrido principal y no dificultar tareas frecuentes como localizar un proyecto concreto por su nombre.
Mantener el estado al volver de un proyecto
Si la persona abre un proyecto y regresa, puede esperar encontrar la misma cantidad de tarjetas que había revelado. Una página sencilla puede dejar que el navegador restaure su estado, pero debes probarlo. Si decides guardar el número visible, valida el dato al recuperarlo y limítalo al total actual. La lista puede haber cambiado desde la visita anterior. No guardes referencias a nodos en almacenamiento; conserva un dato pequeño y reconstruye la presentación. También conviene ofrecer un enlace directo al proyecto para compartirlo sin reproducir una secuencia de pulsaciones.
La elección entre mostrar más y paginar
Mostrar más mantiene la lista en una misma vista y resulta cómodo para una selección moderada. La paginación ofrece puntos de entrada que pueden compartirse y ayuda cuando el volumen crece. El desplazamiento infinito añade otras exigencias de orientación y acceso al pie. No son variantes intercambiables por un cambio visual. Valora cantidad, propósito y frecuencia de búsqueda antes de elegir. Para un portfolio de seis proyectos, el snippet puede ser suficiente; para un inventario extenso con filtros, empieza por diseñar el modelo de navegación y de consulta de datos.
Documentar el alcance del componente
Deja anotado que el ejemplo trabaja con elementos locales y un lote fijo. Quien lo mantenga después debe saber por qué no existe una petición de red ni un estado de carga. Si el producto cambia, revisa el diseño antes de añadir nuevas responsabilidades al mismo manejador. Filtros, ordenación y búsqueda pueden alterar qué significa visibles y cuál es el total. Define si el contador refleja todos los proyectos o solamente los resultados del filtro. Una variable sencilla deja de ser suficiente cuando se mezclan varios conjuntos sin una regla clara de actualización.
Guías relacionadas para seguir practicando
Puedes ampliar esta práctica con Trabajar con colecciones y Distribuir tarjetas con Grid.
