Categorias: CSS | HTML | JavaScript

Módulo Texto com botão Leia Mais

Escrito por Amanda de Lavra

12 de janeiro de 2023
A cliente tinha alguns textos para colocar na home que não eram muito grandes, mas também não eram pequenos. Ela não queria colocar no layout de FAQ, mas também não queria criar um blog só por isso. Então, usando o módulo texto, criei um botão Leia Mais que esconde/revela o texto. Me baseei no tutorial https://www.divi-pixel.com/add-read-more-button-in-divi/. O primeiro passo é o HTML no módulo.
<h5>Transtorno do Espectro Autista (TEA)</h5>
<div class="readMoreContent">

A primeira descrição de um paciente com transtorno do espectro autista (TEA) foi feita em 1943 pelo austríaco Leo Kanner.<span class="dots">…</span><span class="more"> Este transtorno é mais frequente em meninos, numa relação de 4:1.
Trata-se de uma doença neurocomportamental multifatorial, mas com influência genética importante, o que explica a grande heterogeneidade fenotípica do espectro.
O diagnóstico é feito a partir da presença de déficits persistentes na comunicação e interação social em múltiplos contextos, bem como da presença de padrões restritos e repetitivos de comportamento, interesse ou atividades, sendo estas alterações presentes desde o início do período de neurodesenvolvimento.
Frequentemente, o Transtorno do Espectro Autista está associado a transtornos psiquiátricos, como o transtorno do déficit de atenção e hiperatividade, a depressão, a ansiedade e o transtorno obsessivo-compulsivo.
O tratamento exige uma abordagem multidisciplinar e quando necessário, tratamento medicamentoso para os sintomas-alvos, como insônia, agitação psicomotora, impulsividade, irritabilidade, agressividade, desatenção, transtornos do humor, tiques e comportamentos estereotipados.
</span>

<a href="#tema2"><button class="read-more-btn">Leia Mais</button></a>

</div>
O link no botão é importante, pois ao clicar no botão para esconder o texto, ele centraliza na caixa de texto que foi fechada. Por isso o href deve ser a id do próprio módulo.
Em segundo lugar, vem o código CSS.
/**Texto com Leia Mais**/
/*Esconder texto adicional*/
.more {
	display: none;
}

/*Botão Leia Mais*/
.read-more-btn {
	background-color: #e1cbee;
	color: #333;
	font-weight: bold;
	padding: 8px 16px;
	border: 2px;
	border-radius: 20px;
}
Por fim, o código JavaScript que deve ser incluso no body do site:
document.querySelectorAll('.readMoreContent').forEach(function(item){
            const dots = item.querySelector('.dots'),
                  moreText = item.querySelector('.more'),
                  btnText = item.querySelector('.read-more-btn');
            btnText.onclick = function(){
                if (dots.style.display === "none") {
                    dots.style.display = "inline";
                    btnText.innerHTML = "Leia Mais";
                    moreText.style.display = "none";
                } else {
                    dots.style.display = "none";
                    btnText.innerHTML = "Leia Menos";
                    moreText.style.display = "inline";
                }
            }
        })
E aqui estão os textos:
O que faz um Neurologista Infantil ou Neuropediatra?

O Neurologista Infantil ou também chamado de Neuropediatra investiga e acompanha crianças com os seguintes sintomas:…
– Atrasos na aquisição de marcos do desenvolvimento neuropsicomotor
– Dificuldades escolares
– Transtorno do Espectro Autista (TEA)
– Transtorno de Déficit de Atenção e Hiperatividade (TDAH)
– Deficiência Intelectual
– Paralisia Cerebral
– Movimentos involuntários e/ou Distúrbios do movimento
– Crise febril
– Epilepsias
– Dores de cabeça
– Distúrbios do sono
– Síndromes Genéticas
– Alterações na força, marcha, equilíbrio e coordenação

Transtorno do Espectro Autista (TEA)

A primeira descrição de um paciente com transtorno do espectro autista (TEA) foi feita em 1943 pelo austríaco Leo Kanner.… Este transtorno é mais frequente em meninos, numa relação de 4:1.
Trata-se de uma doença neurocomportamental multifatorial, mas com influência genética importante, o que explica a grande heterogeneidade fenotípica do espectro.
O diagnóstico é feito a partir da presença de déficits persistentes na comunicação e interação social em múltiplos contextos, bem como da presença de padrões restritos e repetitivos de comportamento, interesse ou atividades, sendo estas alterações presentes desde o início do período de neurodesenvolvimento.
Frequentemente, o Transtorno do Espectro Autista está associado a transtornos psiquiátricos, como o transtorno do déficit de atenção e hiperatividade, a depressão, a ansiedade e o transtorno obsessivo-compulsivo.
O tratamento exige uma abordagem multidisciplinar e quando necessário, tratamento medicamentoso para os sintomas-alvos, como insônia, agitação psicomotora, impulsividade, irritabilidade, agressividade, desatenção, transtornos do humor, tiques e comportamentos estereotipados.

Transtorno de Déficit de Atenção e Hiperatividade (TDAH)

A característica essencial do Transtorno de Déficit de Atenção/Hiperatividade é um…
padrão persistente de desatenção e/ou hiperatividade-impulsividade.
A desatenção manifesta-se como falta de atenção em tarefas, falta de persistência, dificuldade de manter o foco e desorganização. A hiperatividade é uma agitação motora excessiva (como uma criança que corre por tudo) quando não apropriado ou remexe, batuca ou conversa em excesso. A impulsividade refere-se a ações precipitadas. Pode se manifestar como intromissão social (como interromper as pessoas em excesso).
Os sintomas prejudicam o funcionamento e o desenvolvimento da criança em mais de um ambiente (ex: em casa, na escola) e devem estar presentes antes mesmo dos 12 anos de idade.
Não existe marcador biológico para realizar o diagnóstico, que é realizado com base na observação clínica do paciente.
O tratamento inclui intervenção comportamental e uso de medicações (ex: psicoestimulantes).

Posts relacionados

Customizações da página de login e painel administrativo do WordPress

Customizações da página de login e painel administrativo do WordPress

Para todo o site que eu faço, personalizo a página de login e também o wp-admin para ficar com a marca do cliente. Recentemente, aperfeiçoei o código para que o login ficasse no meio da página, tanto verticalmente quanto horizontalmente. Segue código usado aqui neste...

Botão Leia Mais no Elementor

Botão Leia Mais no Elementor

O site do cliente tinham alguns textos que eram muito extensos e, num layout de coluna, variavam muito de tamanho. Decidi adaptar o que já havia feito no Divi, ao incluir um botão Leia Mais (https://blog.amandadelavra.com.br/modulo-texto-com-botao-leia-mais/), mas...

Como manter a proporção de um elemento com CSS

Como manter a proporção de um elemento com CSS

Me pediram para colocar um elemento flutuante no site com o preço de cada produto. Como os preços variam de acordo com o produto, eu não podia ajustar com padding apenas para que ficasse redondinho na proporção 1:1. Para isso, usei a propriedade do CSS aspect-ratio....