Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Como criar um leia mais em diferentes ocasiões?

Oi pessoal, como eu posso criar um botão de "LER MAIS" em Jquery e como e posso criar uma função para que eu possa "diferenciar" os botões clicados? CÓDIGO EXEMPLO

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Exemplo</title>
</head>
<body>
    <h1>Exemplo1</h1>
    <p>Aenean placerat. In vulputate urna eu arcu. Aliquam erat volutpat. Suspendisse potenti. Morbi mattis felis at nunc. Duis viverra diam non justo. In nisl. Nullam sit amet magna in magna gravida vehicula. Mauris tincidunt sem sed arcu. Nunc posuere. Nullam lectus justo, vulputate eget, mollis sed, tempor sed, magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam neque. Curabitur ligula sapien, pulvinar a, vestibulum quis, facilisis vel, sapien. Nullam eget nisl. Donec vitae arcu.</p>
    <button class="botao">Ler mais</button><br>
    <p class="oculto">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Aliquam erat volutpat. Nunc auctor. Mauris pretium quam et urna. </p>
    <br><br>
    <h1>Exemplo2</h1>
    <p>Aenean placerat. In vulputate urna eu arcu. Aliquam erat volutpat. Suspendisse potenti. Morbi mattis felis at nunc. Duis viverra diam non justo. In nisl. Nullam sit amet magna in magna gravida vehicula. Mauris tincidunt sem sed arcu. Nunc posuere. Nullam lectus justo, vulputate eget, mollis sed, tempor sed, magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam neque. Curabitur ligula sapien, pulvinar a, vestibulum quis, facilisis vel, sapien. Nullam eget nisl. Donec vitae arcu.</p>
    <button class="botao">Ler mais</button><br>
    <p class="oculto">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante.</p>
</body>
</html>

CSS

.oculto{
    display: none;
}
3 respostas

Fala aí Lucas, beleza? Desculpe mas não entendi sua dúvida, poderia explicar com mais detalhes?

Espero ter ajudado.

Assim, em ambos parágrafos existem um botão e um texto oculto. Eu gostaria de criar uma função que mostrasse esse texto oculto pra mim (usando JQuery) só que, das vezes que eu tentei ele mostrava os dois textos ocultos para mim, ao invés de mostrar só o que eu estava clicando. Melhorou?

solução!

Legal, o que pode fazer é definir duas classes para cada parágrafo:

<p class="js-paragrafo1">...</p>
<p class="js-paragrafo2">...</p>

Dai no seu JavaScript, você busca pelo parágrafo que deseja mostrar.

$('js-paragrafo1')
$('js-paragrafo2')

Espero ter ajudado

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software