How to put a "read more" "read less" button on a php foreach?

Question

Hello, I have an array within a foreach that brings a list of procedures. But I want only the first three to appear and have a "read more" "read less" link to show the rest of the content or hide this content.

When it’s in a string, my javascript works. I’ll show.

    function AddReadMore() {
        //This limit you can set after how much characters you want to show Read More.
        var carLmt = 350;
        // Text to show when text is collapsed
        var readMoreTxt = " ... Leia mais";
        // Text to show when text is expanded
        var readLessTxt = " Leia menos";
 
 
        //Traverse all selectors with this class and manupulate HTML part to show Read More
        $(".addReadMore").each(function() {
            if ($(this).find(".firstSec").length)
                return;
 
            var allstr = $(this).text();
            if (allstr.length > carLmt) {
                var firstSet = allstr.substring(0, carLmt);
                var secdHalf = allstr.substring(carLmt, allstr.length);
                var strtoadd = firstSet + "<span class='SecSec'>" + secdHalf + "</span><span class='readMore'  title='Click to Show More'>" + readMoreTxt + "</span><span class='readLess' title='Click to Show Less'>" + readLessTxt + "</span>";
                $(this).html(strtoadd);
            }
 
        });
        //Read More and Read Less Click Event binding
        $(document).on("click", ".readMore,.readLess", function() {
            $(this).closest(".addReadMore").toggleClass("showlesscontent showmorecontent");
        });
    }
    $(function() {
        //Calling function after Page Load
        AddReadMore();
    });

    .addReadMore.showlesscontent .SecSec,
    .addReadMore.showlesscontent .readLess {
        display: none;
    }
 
    .addReadMore.showmorecontent .readMore {
        display: none;
    }
 
    .addReadMore .readMore,
    .addReadMore .readLess {
        font-weight: bold;
        margin-left: 2px;
        color: #00CFA0;
        cursor: pointer;
    }
 
    .addReadMoreWrapTxt.showmorecontent .SecSec,
    .addReadMoreWrapTxt.showmorecontent .readLess {
        display: block;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="addReadMore showlesscontent">
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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

It even works that way, only it turns everything into a single string. What I want is for you to show the first three and when I click on "read more" the rest will appear, only continuing a list. I’ll show you the code snippet:

<span style="" class="addReadMore showlesscontent">
<br>
@foreach($profissional['procedimentos'] as $procedimento)
  <p class="first">{{ strtolower($procedimento['tipo']) }}</p>
@endforeach
</span>

The list goes like this:

Answer 1

First you need to make a full summary has this function that can help you:

function resumo($string, $chars) {
    if (strlen($string) > $chars)
        return substr($string, 0, $chars).'...';
    else
        return $string;
}

echo resumo("abcde", 4);

Then on the read more button if you are going to use the form on the same page you need to have the maximum amount of strlen and move on to an action of that "read more..." button or redirect to another page with full text.