Eu gostaria de fazer um botão "leia mais" e "leia menos" com JavaScript Puro (sem jQuery). Porém, esse texto vem dinamicamente do banco de dados e uso um foreach do PHP para preencher as divs com esses textos que vem do banco.
Esses textos podem ter até 3000 caracteres, porém, eu gostaria de só mostrar 1000, e caso o usuário clicasse no "leia mais" então os 3000 caracteres seriam mostrados. Então se logo depois eu clicasse no "leia menos", então o texto da div voltaria a ter 1000 caracteres.
Consegui ver uns exemplos, porém o texto não era preenchido dinamicamente e era usado uma tag "span" abraçando o texto que seria retirado ou mostrado.
Só que no meu caso não é possível colocar essa tag "span" justamente porque o texto é dinâmico e vem do banco de dados.
Segue meu código:
<?php foreach ($feed['posts'] as $data) { ?>
<div class="feed-item-body mt-10 m-width-20 post-body">
<?php echo nl2br($data->body['body']); ?>
</div>
<?php } ?>
O meu conteúdo (texto) está naquele $data->post['body'].
Segue abaixo meu código de uma forma mais verificável. Vamos imaginar que aquele texto ali dentro da div tenha vindo do banco
<div class="feed-item-body mt-10 m-width-20 post-body">
(IMAGINEM QUE ESSE SEJA UM TEXTO COM 3000 CARACTERES) Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
Tem esse exemplo aqui da w3Schools: Exemplo:
Porém reparem que é um texto estático e eles usam um span. Se no meu caso fosse um texto estático, seria bem mais fácil.
Então como ficaria um código JavaScript para mostrar e recolher o texto de acordo com o seu número de caracteres ?
div
. A com o texto completo você deixa oculto, e a com texto cortado você deixa exibindo. Quando clicar no link, você exibe a do texto completo e oculta a outra.