Show more / show less with jQuery

Limit the viewable number of text of long paragraph text (no css)

by akalankaimesh

HTML

<p class="view_more_content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ullamcorper dolor id dictum venenatis. Sed ultricies elementum lectus non elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id mi tincidunt, suscipit ex ut, porttitor
  magna. Nam tempor, nulla vel tempus facilisis, neque dui cursus nisi, in placerat sapien lorem vitae sem. Curabitur fermentum nisl at tempor ultricies. Maecenas congue risus sit amet consectetur efficitur. Ut eleifend tortor id dui fringilla finibus.
  Sed eu semper est. Phasellus et placerat neque, a dignissim tellus. Nulla nec libero augue. Nulla non pharetra massa.
</p>

<p class="view_more_content">
  Duis faucibus consequat vehicula. Praesent venenatis leo non felis cursus, quis eleifend velit laoreet. Vestibulum imperdiet enim et scelerisque pretium. Vestibulum interdum, felis dapibus volutpat finibus, lorem elit tincidunt lorem, et elementum nulla
  purus id diam. Aliquam non est nec sapien convallis euismod ultricies ac nibh. Donec suscipit lacus id tristique condimentum. Nunc sem massa, varius posuere purus ac, ultricies hendrerit lectus.
</p>

JavaScript

//limit display text content word count
$.fn.limitDisplayWordCoount = function(wordLimit) {
  var textContentHolder = []; //initialize a array to store separated text
  var currentElments = $(this); //current elements selector

  //loop trough the elements
  currentElments.each(function(i, ele) {
    var separateToWOrds = $(ele).text().split(" "); //separate text into words array
    if (separateToWOrds.length > wordLimit) {
      //separate text into tow parts and store in a array
      textContentHolder[i] = [separateToWOrds.slice(0, wordLimit).join(" "), separateToWOrds.slice(wordLimit, separateToWOrds.length).join(" ")];
      //remove current text content form DOM and append tags
      $(ele).empty().append("<span class='display_part'></span><span class='hidden_part' style='display: none'></span><span class='three_dots'>...</span><a href='javascript:void(0);' class='toggle_hid_txt' style='color:#00aced;padding-left:5px;white-space:nowrap;'>view more</a>");

      //load separated text into appended tags
      $(ele).find(".display_part").text(textContentHolder[i][0]);
      $(ele).find(".hidden_part").text(" "+textContentHolder[i][1]);
      console.log(i);
    }
  });

  //trigger show hide hidden part on show more button click
  $(document).on("click", ".toggle_hid_txt", function() {
    var currentBtn = $(this);
    currentBtn.text(function(index, currentBtnTxt) { //toggle view more button text
      return currentBtnTxt === "view more" ? "view less" : "view more";
    });

    currentBtn.siblings(".hidden_part").fadeToggle(200); //toggle hidden text part
    currentBtn.siblings(".three_dots").toggle(200); //toggle three dots
  });
};

$(".view_more_content").limitDisplayWordCoount(20);;