hideText.js

A jQuery based function for converting long texts into an excerpt with a Read More link.

by Michael Wender

HTML

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-4 hidetext1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis malesuada dictum. Fusce nec ultricies lacus. Etiam porttitor, purus vitae scelerisque rutrum, est velit consequat felis, quis sodales libero dui at nibh. Sed elit nibh, posuere
          a viverra eget, rhoncus non nisl. Sed dignissim adipiscing massa vel tristique. </p>
        <p>Nulla odio odio, sodales ut commodo id, fringilla et nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In tincidunt facilisis fringilla. Proin blandit dolor tempor lorem suscipit faucibus.</p>
      </div>
      <div class="col-xs-4 hidetext2">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis malesuada dictum. Fusce nec ultricies lacus. Etiam porttitor, purus vitae scelerisque rutrum, est velit consequat felis, quis sodales libero dui at nibh. Nulla odio odio, sodales
          ut commodo id, fringilla et nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
      </div>
      <div class="col-xs-4 hidetext3">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis malesuada dictum. Fusce nec ultricies lacus.</p>
        <p>Etiam porttitor, purus vitae scelerisque rutrum, est velit consequat felis, quis sodales libero dui at nibh. Sed elit nibh, posuere a viverra eget, rhoncus non nisl.</p>
        <p>
          Sed dignissim adipiscing massa vel tristique. Nulla odio odio, sodales ut commodo id, fringilla et nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In tincidunt facilisis fringilla. Proin blandit dolor tempor
          lorem suscipit faucibus.</p>
     ...

CSS

.row {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

JavaScript

(function($) {
  function hideText(textselector, strlen, moretext) {
    strlen = typeof strlen !== 'undefined' ? strlen : 100;
    moretext = typeof moretext !== 'undefined' ? moretext : 'Read More';

    var sections = $(textselector);
    for (var i = 0; i < sections.length; i++) {
      console.log(sections[i]);
      var textToHide = $(sections[i]).html();
      var textToCheck = $(sections[i]).text().substring(strlen);
      if ('' == textToCheck)
        continue;
      var visibleText = $(sections[i]).text().substring(0, strlen);

      $(sections[i])
        .html(('<span class="visible-text">' + visibleText + '</span>') + ('<span class="hidden-text">' + textToHide + '</span>'))
        .append('<span class="read-more">&hellip;[<a id="read-more" title="' + moretext + '" style="cursor: pointer;">' + moretext + '</a>]</spam>')
        .click(function() {
          $(this).find('span.hidden-text').toggle();
          $(this).find('span.read-more').hide();
          $(this).find('span.visible-text').hide();
        });
      $(sections[i]).find('span.hidden-text').hide();
    }
  }

  hideText('div.hidetext1', 200, 'More &darr;');
  hideText('div.hidetext2', 220);
  hideText('div.hidetext3', 150, 'See more &rarr;');
  hideText('div.col-xs-3', 150, 'More &darr;');
})(jQuery);