Jump to content

category desc read more button

Recommended Posts


I have a problem. 

I have a read more button and when I click on it I want to see the rest of the text. If I use nofilter, it works well, but the layout is removed, which is not necessary. But if I do not use a nofilter, I will only see the layout, then you will see all the text while most of the text must be hidden under the read more button.

I have prestashop

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    function AddReadMore() {
        //De lengte van de tekst wat die laat zien
        var carLmt = 400;
        // Tekst wat die laat zien als die is samengevouwen
        var readMoreTxt = " ...<br/><br />Lees verder";
        // Tekst wat die laat zien als die is uitgevouwen
        var readLessTxt = "<br /><br />Lees minder";

        //Traverse all selectors with this class and manupulate HTML part to show Read More
        $(".addReadMore").each(function() {
            if ($(this).find(".firstSec").length)

            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>";

        //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.showlesscontent .SecSec,
    .addReadMore.showlesscontent .readLess {
        display: none;

    .addReadMore.showmorecontent .readMore {
        display: none;

    .addReadMore .readMore,
    .addReadMore .readLess {
        margin-left: 2px;
        color: black;
        cursor: pointer;
        font-family: rubik, sans serif;

    .addReadMoreWrapTxt.showmorecontent .SecSec,
    .addReadMoreWrapTxt.showmorecontent .readLess {
        display: block;

     <DIV class="addReadMore showlesscontent">
          {$category.description nofilter}






Share this post

Link to post
Share on other sites

I got a same problem. With the nofilter smarty tag tpl works but validator.prestashop.com give me error


"Removing variable escaping is highly discouraged because malicious code can be displayed and executed"


Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More