Como adicionar um botão "Carregar mais" a uma lista de artigos

Quando se utiliza o Elemento da lista de artigosExibir muitos artigos de uma só vez pode fazer com que sua página pareça longa e difícil de navegar. Uma maneira simples de melhorar a legibilidade é adicionar uma Carregar Mais Botão que inicialmente exibe apenas parte da lista e expande o conteúdo completo ao ser clicado.

Antes que você comece

Antes de adicionar a função "Carregar mais", certifique-se de ter:

• An Elemento da lista de artigos já adicionado à página
• A Elemento de botão que será usado como o Carregar Mais botão
• As ID do elemento de ambos os elementos

Você precisará desses IDs para atualizar o script corretamente.

Como adicionar um botão "Carregar mais"

Siga estes passos para criar o comportamento "Carregar mais".

Passo 1: Adicionar um elemento de botão

Primeiro, adicione um botão abaixo da Lista de Artigos.

• Arraste um Elemento de botão abaixo do seu Lista de artigos

• Altere o texto do botão para: Carregar Mais

• Estilize o botão conforme necessário.

Este botão acionará a ação de expansão.

Etapa 2: Copiar IDs dos elementos

Você precisa copiar os IDs dos elementos:

• As Elemento da lista de artigos
• As Elemento de botão

Para copiar o ID de um elemento:

• Clique com o botão direito do mouse no elemento.
• Clique Copiar → Copiar ID do elemento
• Salve a cópia do ID.

Você substituirá os IDs de amostra dentro do código.

Etapa 3: Adicionar um elemento de código personalizado

Adicionar uma Elemento de código personalizado.

Em seguida, cole o seguinte código HTML no elemento Código Personalizado.

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

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

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

 se (alvo) {

   target.style.height = "400px";

 }

 se (botão && alvo) {

   botão.adicionarOuvinteDeEvento("clique", função () {

     target.style.height = "100%";

     botão.estilo.exibir = "nenhum";

   });

 }

});





[data-id="gMwtAAckG5"]{

 overflow: oculto !importante;

}

Etapa 4: Substitua os IDs dos elementos de amostra

No código acima, você deve substituir os IDs de exemplo pelos seus próprios.

Substituir:

gMwtAAckG5

com:

• Sua ID do elemento da lista de artigos

Substituir:

g4FCNC2MEY

com:

• Sua ID do elemento do botão

Como funciona a função "Carregar mais"

Após adicionar o código:

1. A lista de artigos mostrará inicialmente apenas 400px de altura
2. Artigos adicionais serão ocultados.
3. Quando os usuários clicam Carregar Mais:

• A lista completa ficará visível.
• O botão desaparece.

Isso cria uma interação de expansão simples e clara.

Você pode controlar quantos artigos aparecem antes de clicar. Carregar Mais.

Localize esta linha no código:

target.style.height = “400px”;

Mudar 400px para outro valor, como:

• 300px → mostrar menos artigos
• 500px → mostrar mais artigos
• 600px → mostrar ainda mais

Ajuste esse valor de acordo com o seu layout.