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.