Jump to content
VidWeeks

category desc read more button

Recommended Posts

Hello,

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 1.7.6.1

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <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)
                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();
    });
    </script>
    <style>
    .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;
    }
    </style>






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

 

with_layout1.PNG

with_layout2.PNG

without_layout1.PNG

without_layout2.PNG

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

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