3

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 ?

16
  • 1
    Vou dar uma olhada. Obrigado. Pesquisei bastante e estava achando nada que se aproximasse da minha labuta. Vou ver. Commented 9/11/2020 às 14:41
  • 1
    Você perguntou na outra pergunta se o "texto morre". Sim, morre. A ideia é ter duas 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. Commented 9/11/2020 às 15:11
  • 1
    "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" não consigo ver onde isso muda algo, depois que o PHP rodou o resultado é um HTML estático. O JS só roda depois.
    – Largato
    Commented 9/11/2020 às 15:16
  • 1
    Chegou a ver o exemplo CSS? Tem muitas maneiras de adaptar, dá pra trocar a classe com JS se quiser evitar o checkbox. Melhor que apagar seria editar e por o exemplo minimo verificavel, aí seria útil pra um público amplo
    – Largato
    Commented 9/11/2020 às 15:38
  • 2
    Acho que vale uma lida no Exemplo Mínimo, Completo e Verificável. Verificável, minimo e completo é se eu pegar o código, salvar como PHP aqui (ou abrir num ideone) e sair o HTML do jeito que vc tem hoje. Que é pra gente ter o mesmo resultado que vc, mas sem criar um banco pra isso (ex, com uma variável no lugar). E o "minimo" significa tirar tudo que não muda o problema. Se dominar o conceito, você faz com que seu tempo no site renda mais pra você e todos envolvidos.
    – Largato
    Commented 9/11/2020 às 15:42

4 Respostas 4

5

Você pode fazer com as seguintes etapas:

  • Verificar se o texto passa o tamanho desejado com um if em PHP.
  • Limitar o texto com o tamanho desejado dentro de uma div caso o tamanho passe o limite pelo PHP.
  • Criar uma div com o conteúdo completo, porém oculta.
  • Criar um link para expandir junto ao texto cortado e um link para reduzir no texto completo.
  • Aplicar o Javascript.

Exemplificando, o seu código PHP poderia ficar parecido com isso:

<?php foreach ($feed['posts'] as $data) { ?>      
      <div class="feed-item-body mt-10 m-width-20 post-body">
           <?php if (mb_strlen($data->post['body'], 'UTF-8') > 1000): ?>
               <span class="short-text">
                   <?php echo nl2br(mb_substr($data->post['body'], 0, 1000, 'UTF-8')); ?> 
                   ... 
                  <a class="read-more">leia mais</a>
               </span>
               <span class="full-text" style="display: none"><?php echo nl2br($data->post['body']) ?> <a class="read-less">ler menos</a></span>

           <?php else: ?>
               <span class="full-text"><?php echo nl2br($data->post['body']) ?></span>
           <?php endif ?>
      </div>        
<?php } ?>

Com o Javascript, você poderia fazer isso:

document.querySelectorAll('.post-body').forEach(function (el) {
   
   var fullText = el.querySelector('.full-text');
   var shortText =  el.querySelector('.short-text');
   
   if (! shortText) return;
   
   el.querySelector('.read-more').addEventListener('click', function () {
      fullText.style.display = '';
      shortText.style.display = 'none';
   })
   
   el.querySelector('.read-less').addEventListener('click', function () {
      fullText.style.display = 'none';
      shortText.style.display = '';
   })
})
a {
   color: blue;
   cursor: pointer;
}
<div class="feed-item-body mt-10 m-width-20 post-body">
     <span class="short-text">Meu texto está ... <a class="read-more">ler mais</a></span>
     <span class="full-text" style="display: none">Meu texto está aqui firme e forte <a class="read-less">ler menos</a></span>
</div>

<div class="feed-item-body mt-10 m-width-20 post-body">
     <span class="short-text">Meu texto está ... <a class="read-more">ler mais</a> </span>
     <span class="full-text" style="display: none">Meu texto está aqui firme e forte <a class="read-less">ler menos</a></span>
</div>

<div class="feed-item-body mt-10 m-width-20 post-body">
     <span class="full-text">Meu texto pequeno</span>
</div>

Note que na última div, simulei o caso de cair no else do PHP e o texto ser exibido normalmente, pelo fato de não ultrapassar 1000.

Não vou explicar sobre mb_string ao invés de substr, porque essa resposta do Bacco já explica tudo.

1
1

Bom achei muita coisa parecida assim como apontaram nos comentários, olha você pode fazer algo como o códico abaixo Js (mais pode fazer com a mesma sintaxe do php ou javascript mesmo:

function readMoreRome() { //finds function
var dots = document.getElementById("dots"); //returns element that has the ID attribute with value, searches for dots
var moreText = document.getElementById("more"); // '' '' searches for more
var btnText = document.getElementById("myBtn"); // '' '' searches for myBtn

if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; //button says read more to show more text
    moreText.style.display = "none";
} else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; //button says read less to show less text
    moreText.style.display = "inline";
}
}

function readMoreBuda() { //finds function
var dots = document.getElementById("dots2"); //returns element that has the ID attribute with value
var moreText = document.getElementById("more2"); // '' '' searches for more2
var btnText = document.getElementById("myBtn2"); // '' '' searches for myBtn2

if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; //button says read more to show more text
    moreText.style.display = "none";
} else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; //button says read less to show less text
    moreText.style.display = "inline";
}
}

HTML:

<div class="card">
<h2>Visit Budapest</h2>
<div class="info"> <span class="date"><i class="far fa-calendar"></i> November 12, 2019</span> <span class="comment"><i class="far fa-comment-alt"></i> 2 comments</span> </div>
<div class="img"><img src="img/szechenyi.jpg" style="height:200px;"> </div>
<p><i>Széchenyi Thermal Baths </i></p>
<p>
    Budapest is the capital city of Hungary. It is best known for its arts and culture. It is a relatively small city, however there are much to see and do.
    <span id="dots2">...</span>
    <span id="more2">Situated on thermal springs, there are many naturally heated baths to relax in, the Széchenyi baths are the largest with 15 indoor baths and 3 outdoor. There are many spectacular viewpoints in Budapest, great for capturing the views of the city. From 360 panoramic views up at St Stephens Basilica to a wide view of the parliament and the River at Fisherman’s Bastion. Visit the Museum of Fine Arts and enjoy a day amongst famous European art. Classical music lovers will appreciate a performance at the Academy of Music.</span>
</p>
<button onclick="readMoreBuda()" id="myBtn2">Read more</button>
</div>
<br>
<div class="card">
<h2>Visit Barcelona</h2>
<div class="info"> <span class="date"><i class="far fa-calendar"></i> December 06, 2019</span> <span class="comment"><i class="far fa-comment-alt"></i> 5 comments</span> </div>
<div class="img"><img src="img/guell-park.jpg" style="height:200px;"></div>
<p><i>Park Güell </i></p>
<p>
    Barcelona, framed for its individuality, cultural interest, and physical beauty, home to art and architecture. Facing the Mediterranean to the southeast,
    <span id="dots3">...</span>
    <span id="more3"> the city is one of a kind. Upon visiting make sure you visit the spectacular and unique Park Güell which was firstly designed for a town up in the mountains by artist Antoni Gaudí. Gaudí's work is admired by architects around the World as being one of the most unique and distinctive styles in modern architecture. Other places worth visiting is the La Sagrada Família, is a giant basilica. With beaches on your doorstop, and art and city culture, this diverse city has everything to offer.</span>
</p>
<button onclick="readMoreBarca()" id="myBtn3">Read more</button>
</div>

Não importa se seus dados vier de um banco de dados ou não, para mostrar exibir e exibir "menos" a lógica é sempre a mesma, pega a ideia no exemplo :)

Tá inglês mais tem até mais de uma resposta e explicação caso queira entender melhor referência: https://stackoverflow.com/questions/59360119/how-to-make-multiple-read-more-read-less-buttons-in-the-same-one-page

3
  • Eu agradeço a tentativa, Herick Eduardo, porém o exemplo que você citou é com textos estáticos. É mais ou menos conforme o exemplo da w3Schools que eu citei ali na minha pergunta. Esse seu exemplo não me serviria. Commented 9/11/2020 às 14:59
  • Ok, desculpe, vou deixar o códico pra caso alguém daqui um tempo tenha o mesmo problema talvez o exemplo sirva pra outro contexto etc.
    – user212797
    Commented 9/11/2020 às 15:03
  • Nada. A tentativa de ajuda é sempre válida. Commented 9/11/2020 às 19:02
0

Seguindo a resposta e dicas nos comentários do Wallace Maxters, consegui adaptar meu código e fazê-lo funcional, me baseando somente no JS (com um mínimo de PHP).

Vou deixar meu código só para ajudar alguem que, futuramente, tiver passando por algo semelhante ao que passei.

O meu código ficou assim:

<?php foreach ($feed['posts'] as $data) { ?>   
  <div class="box-body">      
       <div class="feed-item-body mt-10 m-width-20 post-body">
            <?php echo nl2br(mb_strimwidth($data->post['body'], 0, 1000, ' ...')); ?>
            <button class="ler-mais">Ler mais</button> 
       </div>  
      
       <div class="feed-item-body mt-10 m-width-20 post-body-2">
            <?php echo nl2br($data->post['body']); ?>
            <button class="ler-menos">Ler menos</button> 
       </div> 
  </div> 
<?php } ?>

O JS ficou assim:

//Código do botão leia mais
document.querySelectorAll('.ler-mais').forEach(function (el) {
   
   el.addEventListener('click', function () {
      let divBoxBody = el.closest('.box-body'); 
      let divPostBody = divBoxBody.querySelector('.post-body').style.display = "none";   
      let divPostBody2 = divBoxBody.querySelector('.post-body-2').style.display = "block"; 
   })   
   
})

//Código do botão leia menos
document.querySelectorAll('.ler-menos').forEach(function (el) {
   
   el.addEventListener('click', function () {
      let divBoxBody = el.closest('.box-body'); 
      let divPostBody = divBoxBody.querySelector('.post-body').style.display = "block";   
      let divPostBody2 = divBoxBody.querySelector('.post-body-2').style.display = "none"; 
   })   
   
})

Tenho duas div's. Uma eu deixo aparente (com o texto parcial, exibindo somente 1000 caracteres [para isso usamos o mb_strimwidth() do PHP] dos dados que vem do banco). E a outra eu deixo escondida (com display:none) com o texto inteiro, exibindo todo o texto que vem do banco de dados.

Quando clico no botão "ler mais", a div com o conteúdo parcial passa a ficar escondida (com display:none) e a div com o conteúdo inteiro passa a ficar visível (com display:block).

Quando clico no botão "ler menos" é feito o inverso do que foi feito acima.

Obrigado aos que ajudaram e espero ajudar também.

-1

Ai está o exemplo, você pode usar função map((dados, id)) para manipular os dados dentro do array e o substring para determinar o tamanho do texto, criei 2 exemplos para te ajudar, no segundo exemplo eu criei a função getData como se eu tivesse pegando os dados da API.

const data = [
  {
    titulo: 'hello',
    text: 'hello world com 3000 caracteres',
  },
];

const leiaMais = () => {
  document.getElementById('leia').innerHTML = 'Leia Menos';
  document.getElementById('leia').onclick = leiaMenos;
  data.map(({ text }, id) => {
    document.getElementById('textoApi').innerHTML = `<p>${text.substring(0, text.length)}</p>`;
  });
};

const leiaMenos = () => {
  document.getElementById('leia').innerHTML = 'Leia Mais';
  document.getElementById('leia').onclick = leiaMais;
  data.map(({ text }, id) => {
    document.getElementById('textoApi').innerHTML = `<p>${text.substring(0, 11)}</p>`;
  });
};

// exemplo com async

async function getData() {
  return data;
}

const leiaMaisAsync = () => {
  document.getElementById('leiaAsync').innerHTML = 'Leia Menos Async';
  document.getElementById('leiaAsync').onclick = leiaMenosAsync;
  getData().then((data) => {
    data.map(({ text }, id) => {
      document.getElementById('textoApiAsync').innerHTML = `<p>${text.substring(0, text.length)}</p>`;
    });
  }).catch(() => {
    // algo errado aconteceu
  });
};

const leiaMenosAsync = () => {
  document.getElementById('leiaAsync').innerHTML = 'Leia Mais Async';
  document.getElementById('leiaAsync').onclick = leiaMaisAsync;
  getData().then((data) => {
    data.map(({ text }, id) => {
      document.getElementById('textoApiAsync').innerHTML = `<p>${text.substring(0, 11)}</p>`;
    });
  }).catch(() => {
    // algo errado aconteceu
  });
};
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
    <script
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"
      defer
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
      defer
    ></script>
    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"
      defer
    ></script>
    <script src="scripts/main.js" defer></script>
    <title>Javascript Teste</title>
  </head>
  <body>
    <div class="container">
      <div>
          <button
            class="btn btn-link collapsed"
            onclick="leiaMais()"
            id="leia"
            data-toggle="collapse"
            data-target="#collapseTwo"
            aria-expanded="false"
            aria-controls="collapseTwo"
          >
            Leia Menos
          </button>
          <div class="card-body" id="textoApi"></div>
      </div>
      <div>
        <button
          class="btn btn-link collapsed"
          onclick="leiaMaisAsync()"
          id="leiaAsync"
          data-toggle="collapse"
          data-target="#collapseTwo"
          aria-expanded="false"
          aria-controls="collapseTwo"
        >
          Leia Menos Async
        </button>
        <div class="card-body" id="textoApiAsync"></div>
      </div>
    </div>
  </body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .