post
Botão “Leia Mais” Customizado p/ Parágrafos de Texto no Elementor (WordPress) com JavaScript (JS) + CSS
Publicado em: 13/08/2024 / Atualizado em: 13/08/2024
Neste artigo, vamos criar um efeito “Leia Mais” em páginas construídas com o Elementor. Vamos implementar um código personalizado em JavaScript e CSS que permite alternar entre mostrar e ocultar o conteúdo de textos longos, utilizando dois botões distintos para abrir e fechar o conteúdo. Além disso, adicionaremos um gradiente invertido ao final do parágrafo fixado, criando um efeito visual que indica a presença de mais texto escondido, melhorando a experiência do usuário e a usabilidade da página.
<style>
.read-more-content {
max-height: 140px; /* Ajuste essa altura conforme necessário */
overflow: hidden;
transition: max-height 0.5s ease-in-out;
position: relative;
}
.read-more-content.expanded {
max-height: 1000px; /* A altura máxima expandida do texto */
}
.read-more-btn.close {
display: none;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var readMoreContainers = document.querySelectorAll('.read-more-container');
readMoreContainers.forEach(function(container) {
var openButton = container.querySelector('.read-more-btn.open');
var closeButton = container.querySelector('.read-more-btn.close');
var closeShadow = container.querySelector('.read-more-shadow');
var content = container.querySelector('.read-more-content');
openButton.addEventListener('click', function() {
content.classList.add('expanded');
openButton.style.display = 'none';
closeShadow.style.display = 'none';
closeButton.style.display = 'block';
});
closeButton.addEventListener('click', function() {
content.classList.remove('expanded');
openButton.style.display = 'block';
closeShadow.style.display = 'block';
closeButton.style.display = 'none';
});
});
});
</script>Dentro dos contêiner e widgets de (texto e botão), você vai colocar essas CLASS abaixo:
OBS: O contêiner de “shadow” é opcional, não influencia no funcionamento, apenas para deixar um efeito de sobra branca leve, para dar impressão de que ainda tem mais conteúdo abaixo. Neste exemplo, criei usando um contêiner do Elementor, e adicionei uma altura fixa de 40px, e um gradiente do transparente para o branco, e um margin de -40px de altura, para que ele ficasse sobreposto no texto. Mas quando o botão de “leia mais” é clicado, ele sobre, e quando clicado novamente para fechar ele abre.
Publicações recomendadas:
Inscreva-se em Nossa News:
Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.
Link Curto para Compartilhamento
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.
bruno.art.br/pb/5606
ID de Referência: 5606
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.