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.