Skip to main content
removeu 4 caracteres do conteúdo
Fonte Link
Gato de Schrödinger
  • 2,5mil
  • 3
  • 16
  • 42
<?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->legend['body']>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->legend['body']>post['body']); ?>
            <button class="ler-menos">Ler menos</button> 
       </div> 
  </div> 
<?php } ?>
<?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->legend['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->legend['body']); ?>
            <button class="ler-menos">Ler menos</button> 
       </div> 
  </div> 
<?php } ?>
<?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 } ?>
Fonte Link
Gato de Schrödinger
  • 2,5mil
  • 3
  • 16
  • 42

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->legend['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->legend['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.