Seção VER MAIS

1. Adicione a classe **container** na seção.
2. Adicione um botão em uma seção abaixo (ou em posição absoluta), com a classe **botao**.
3. Adicione o atributo **data-vermais** com um valor igual no container e no respectivo botão que irá expandir a seção. Ex:

Container 1:

				
					data-vermais | 1

Botão 1:

				
					data-vermais | 1

Container 2:

				
					data-vermais | 2

Botão 2:

				
					data-vermais | 2

E assim por diante. Esse atributo você coloca na aba Avançado > Atributos desses elementos.

4. Adicione o código abaixo no CSS personalizado:

				
					.container{
    max-height: 700px;
    overflow: hidden;
    transition: max-height 2s ease-in-out;
}

.container::after{
    content:"";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 50%, #000);
    top: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
}

.container.expandir{
    max-height: 3000px;
}

.container.expandir::after{
    opacity: 0;
}

5. Adicione o script abaixo no rodapé da página, com o widget HTML:

				
					<script>
document.addEventListener('DOMContentLoaded', function() {
  const botoes = document.querySelectorAll(".botao");
  const containers = document.querySelectorAll(".container");

  botoes.forEach(botao => {
    botao.addEventListener("click", function(event) {
      const botaoClicado = event.currentTarget;
      const textoBotao = botaoClicado.querySelector(".elementor-button-text");
      const vermaisId = botaoClicado.dataset.vermais;
      const indexContainer = Array.from(botoes).indexOf(botaoClicado);
      const container = containers[indexContainer];

      container.classList.toggle("expandir");

      if (container.classList.contains("expandir")) {
        textoBotao.innerText = "VER MENOS";
      } else {
        textoBotao.innerText = "VER MAIS";
      }
    });
  });
});
</script>

6. Adicione o CSS ao botão:

				
					selector {
position: absolute;
bottom: 0;
left: 50%;
transform: translatex(-50%);
z-index: 9;
}
Ver mais