Skip to main content
Tweeted twitter.com/StackOverflowPT/status/1328306838731943938
removeu 2 caracteres do conteúdo
Fonte Link
Gato de Schrödinger
  • 2,5mil
  • 3
  • 16
  • 42

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->legend['body']>body['body']); ?>
      </div>        
<?php } ?>

O meu conteúdo (texto) está naquele $data->legend['body']>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 ?

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->legend['body']); ?>
      </div>        
<?php } ?>

O meu conteúdo (texto) está naquele $data->legend['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 ?

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 ?

adicionou 542 caracteres ao conteúdo
Fonte Link
Gato de Schrödinger
  • 2,5mil
  • 3
  • 16
  • 42

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->legend['body']); ?>
      </div>        
<?php } ?>

O meu conteúdo (texto) está naquele $data->legend['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 ?

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->legend['body']); ?>
      </div>        
<?php } ?>

O meu conteúdo (texto) está naquele $data->legend['body'].

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 ?

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->legend['body']); ?>
      </div>        
<?php } ?>

O meu conteúdo (texto) está naquele $data->legend['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 ?

tags editadas
Link
Wallace Vizerra
  • 107,4mil
  • 106
  • 440
  • 920
adicionou 249 caracteres ao conteúdo
Fonte Link
Gato de Schrödinger
  • 2,5mil
  • 3
  • 16
  • 42
Carregando
Fonte Link
Gato de Schrödinger
  • 2,5mil
  • 3
  • 16
  • 42
Carregando