Geek Answers Handbook

Add the “show more” link to the truncated paragraph only if the number of characters is specified

I want to add the "show more" link (if I click to show the contents that were cropped / hidden) in my paragraph, only if X is sent the number of characters.

For example, I set a minimum of 120 characters, and there is only 60 in the paragraph, so I don’t need to add the “show more” link.

How can i solve this? The code below works fine, but "show more" will be applied to any paragraph that I have, although it is less than the number of X. What should I do?

https://jsfiddle.net/vm0uj7fc/1/

var charLimit = 122; function truncate(el) { var clone = el.children().first(), originalContent = el.html(), text = clone.text(); el.attr("data-originalContent", originalContent); clone.text(text.substring(0, charLimit) + "...") el.empty().append(clone); } function reveal(el) { el.html(el.attr("data-originalContent")); } $("a").on("click", function (e) { e.preventDefault(); var truncateElement = $(this).parent().prev().find(".truncate"); if ($(this).text() === "Read More") { $(this).text("Read Less"); reveal(truncateElement); } else { $(this).text("Read More"); truncate(truncateElement); } }); $(".truncate").each(function () { truncate($(this)); });

:

  • I need to add a dynamic "read more" using a function (.append?)
  • Check the characters, and if less than the maximum amount, DO NOT show more
  • optional if someone can come up with pure Javascript which would be the preferred choice if I weren’t ok with refactoring the code starting from my code above
+6
source share
4 answers

I am writing pure javascript that processes your request, see the demo here: https://jsfiddle.net/IA7medd/751sLn0n/

HTML:

 <div class="container"> <div class="events-left-col"> <h2 class="eventTitle">Event Title</h2> <div class="wrap"> <div class="truncate"> <p class="toggledText"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> </div> </div> <div class="wrap"> <div class="truncate"> <p class="toggledText"> Not enough characters here to show/append the "Read more" link </p> </div> </div> <div class="wrap"> <div class="truncate"> <p class="toggledText"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> </div> </div> </div> </div>

style:

 .toggledText span.trimmed{ display:none; } .read-more .more:before{ content:'Read More'; } .showAll .toggledText span.morePoints{ display:none; } .showAll .toggledText span.trimmed{ display:inline; } .showAll .read-more .more:before{ content:'Read Less'; }

script:

 var charLimit = 120; var numberOfToggled = document.getElementsByClassName('toggledText'); for(i=0; i<numberOfToggled.length; i++){ var el = numberOfToggled[i]; var elText = el.innerHTML.trim(); if(elText.length > charLimit){ var showStr = elText.slice(0,charLimit); var hideStr = elText.slice(charLimit); el.innerHTML = showStr + '<span class="morePoints">...</span> <span class="trimmed">' + hideStr + '</span>'; el.parentElement.innerHTML = el.parentElement.innerHTML + "<div class='read-more'><a href='#' class='more'></a>"; } } window.onclick = function(event) { if (event.target.className == 'more') { event.preventDefault(); event.target.parentElement.parentElement.classList.toggle('showAll'); } }

I also made some changes to your code and it works great. you can see it here: https://jsfiddle.net/IA7medd/j78L76qj/ (if you did not find it)

+4
source

I made some changes to your code. I have listed a question that will help me understand.

  • Iterate through each .truncate
  • Make sure the total character length is greater than 122;
  • If true remove the normHeight class and add the modHeight class
  • When clicking the link, remove modHeight and add the class 'normHeight'

This snippet below may be useful.

 var charLimit = 122; function _truncate(el) { var _clone = el.children().first(); //Removing white space & checking length // _clone[0] because _clone is array of jquery object if(_clone[0].innerHTML.trim().length>charLimit){ _clone.removeClass('normHeight').addClass('modHeight'); //Appending read me link el.append($("<div class='read-more'><a href='#' class='more'>Read More</a>")); } } // Since a.more is dynamic element so using event delegation. $("body").on("click",'a.more',function (e) { e.preventDefault(); $(this).parent().siblings('p.modHeight').removeClass('modHeight').addClass('normHeight'); $(this).hide(); // Once entire text is visible remove read me link }); $(".truncate").each(function () { _truncate($(this)); });

Also note a minor change in HTML and CSS

Check jsfiddle for demonstration

+1
source

I changed your js to the next one and it works just fine as your expectation. I added comments after the modified lines.

 var charLimit = 122; function truncate(el) { var shortText = $('<p/>'), //create new <p/> instead of clone originalContent = el.html(), text = el.text().trim(); // take all text & trim starting and trailing white spaces if (text.length > charLimit) { //check char limit overflow el.next(".read-more").length || el.after('<div class="read-more"><a href="#" class="more">Read More</a>'); //append "Read More" button if not exist el.attr("data-originalContent", originalContent); shortText.text(text.substring(0, charLimit) + "...") el.html(shortText); // use html() instead of empty() and append() } } function reveal(el) { el.html(el.attr("data-originalContent")); } $(".container").on("click", ".more", function (e) { //use delegated event for dynamically added "Read More" button e.preventDefault(); var truncateElement = $(this).parent().prev(".truncate"); //change here as we added "Read More" button after ".truncate" if ($(this).text() === "Read More") { $(this).text("Read Less"); reveal(truncateElement); } else { $(this).text("Read More"); truncate(truncateElement); } }); $(".truncate").each(function () { truncate($(this)); });

WORKING DEMO

+1
source

I just put a little addition to your code

 $(".truncate").each(function(){ if($(this).length < 122) { $(this).parent().next().find(".read-more").hide(); } });

and changed it also

 function truncate(el) { var clone = el.children().first(), originalContent = el.html(), text = clone.text(); if(text.length>charLimit) { el.attr("data-originalContent", originalContent); clone.text(text.substring(0, charLimit) + "...") el.empty().append(clone); } }

Updated script

0
source

More articles:


All Articles