Cómo agregar un botón "Cargar más" a la lista de artículos

Cuando se utiliza el Elemento de lista de artículos, mostrar demasiados artículos a la vez puede hacer que su página parezca larga y más difícil de navegar. Una forma sencilla de mejorar la legibilidad es agregando un Cargar Más Botón que inicialmente muestra solo una parte de la lista y que, al hacer clic, expande el contenido completo.

Antes de Comenzar

Antes de agregar la función Cargar más, asegúrese de tener:

• An Elemento de lista de artículos ya añadido a la página
• A Elemento de botón que se utilizará como el Cargar Más en la
• El ID de elemento de ambos elementos

Necesitarás estos identificadores para actualizar el script correctamente.

Cómo agregar un botón "Cargar más"

Siga estos pasos para crear el comportamiento "Cargar más".

Paso 1: Agregar un elemento de botón

Primero, añade un botón debajo de la lista de artículos.

• Arrastrar un Elemento de botón debajo de tu Lista de artículos

• Cambia el texto del botón a: Cargar Más

• Personaliza el estilo del botón según sea necesario.

Este botón activará la acción de expansión.

Paso 2: Copiar los ID de los elementos

Debes copiar los ID de los elementos:

• El Elemento de lista de artículos
• El Elemento de botón

Para copiar un ID de elemento:

• Haz clic con el botón derecho en el elemento.
• Haga clic en Copiar → Copiar ID del elemento
• Guarda el ID copiado.

Deberás reemplazar los ID de muestra dentro del código.

Paso 3: Agregar un elemento de código personalizado

Agregue un Elemento de Código Personalizado (Custom Code).

A continuación, pegue el siguiente código HTML en el elemento Código personalizado.

document.addEventListener("DOMContentLoaded", function () {

 const target = document.querySelector('[data-id="gMwtAAckG5"]');

 const button = document.querySelector('.g4FCNC2MEY');

 si (objetivo) {

   target.style.height = "400px";

 }

 si (botón && objetivo) {

   botón.addEventListener("click", function () {

     target.style.height = "100%";

     botón.style.display = "ninguno";

   });

 }

});





[data-id="gMwtAAckG5"]{

 desbordamiento: oculto !importante;

}

Paso 4: Reemplazar los ID de los elementos de muestra

Dentro del código anterior, debes reemplazar los ID de ejemplo con los tuyos propios.

Reemplazar:

gMwtAAckG5

con:

• La ID del elemento de la lista de artículos

Reemplazar:

g4FCNC2MEY

con:

• La ID del elemento del botón

Cómo funciona esta función de cargar más

Después de agregar el código:

1. La lista de artículos inicialmente solo mostrará altura 400px
2. Los artículos adicionales estarán ocultos.
3. Cuando los usuarios hacen clic Cargar Más:

• La lista completa se hace visible
• El botón desaparece

Esto crea una interacción de expansión sencilla y limpia.

Puedes controlar cuántos artículos aparecen antes de hacer clic. Cargar Más.

Busca esta línea en el código:

target.style.height = “400px”;

CAMBIAR 400px a otro valor, como por ejemplo:

• 300px → mostrar menos artículos
• 500px → mostrar más artículos
• 600px → mostrar aún más

Ajusta este valor según tu diseño.