2

In full nodes of a certain content type (using panels), I would like to display a text summary with a read more link to display full text, then a show less link to collapse. I had smart trim enabled which allowed a read more link, but the page simply reloaded to the trimmed summary after clicking the link. I am using WYSIWYG with CKEditor.

So far I have tried jquery expander and expanding formatter. Jquery expander didn't have any affect on the full text, expanding formatter displayed an ellipsis at the designated trim spot, followed by the full text, and a read more button after the full text. So, essentially neither worked.

I tried js injector, plus this code and the full text showed -- no effect.

Is there something about WYSIWYG or CKeditor that prevents this function? Suggestions?

2

This worked for me

JS Injector

(function ($) {  

$(document).ready(function() {
    // Configure/customize these variables.
    var showChar = 100; // How many characters are shown by default
    var ellipsestext = "...";
    var moretext = "Show more >";
    var lesstext = "Show less";


    $('.more').each(function() {
        var content = $(this).html();

        if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar, content.length - showChar);

            var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

            $(this).html(html);
        }

    });

    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
$(".morecontent span").css("display", "none");
$(".morelink").css("display", "block");
})
})(jQuery);

enter image description here

CKeditor

    <span class="more">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </span>
    <br><br>
    <div class="more">
      Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
    </div>

enter image description here

  • That did something. Now an ellipsis shows after 100 characters, then nothing else for the first paragraph, then the rest of the full text (several more paragraphs on my test), then a read more link. – Sera Jan 1 '16 at 0:22
  • @Sera you need the CSS or else it won't work properly and set up your CKEditor HTML just like their code. <span class="more"> text goes here</span> – No Sssweat Jan 1 '16 at 0:31
  • Hey no sssweat. Thanks for your help with this. I really don't know what's up. Before posting my question, I had added the CSS to my stylesheet. I had also added the "more" spans, divs to WYSIWYG using source tab. After adding the wrap that you described in your initial answer, there was a change to the first paragraph. That's not showing now though. Back to full text. Super confused. – Sera Jan 1 '16 at 6:02
  • @sera, see my edited my answer. Make sure you checkmark Inline JS in your injector – No Sssweat Jan 1 '16 at 10:59
  • It's working. Thank you so much for your step-by-step instructions. I wasn't sure about the inline or pre-process js and was switching back and forth between the two. Copying and pasting the sample html worked. From there, I added and subtracted to meet particular needs. I think what was messing me up was that I was pasting my text into the regular WYSIWYG editor, then switching to source to add html. All kinds of extra html tags were being generated (extra spans for example) and I couldn't get rid of them. When pasting everything straight into source, no extra html appeared. Thank you again. – Sera Jan 1 '16 at 17:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.