Question

I want to cut off text based on a fixed height.When the text is cut off, a “more” link is used to expand to text. When the text is expanded, a “less” link is used to collapse the text. I wrote the js as this:

$(document).ready(function () {
      // line height in 'px'
      var maxheight=218;
      var showText = "More";
      var hideText = "Less";

      $('.textContainer_Truncate').each(function () {
        var text = $(this);
        if (text.height() > maxheight){
            text.css({ 'overflow': 'hidden','height': maxheight + 'px' });

            var link = $('<a href="#">' + showText + '</a>');
            var linkDiv = $('<div></div>');
            linkDiv.append(link);
            $(this).after(linkDiv);

            link.click(function (event) {
              event.preventDefault();

              if (text.css('height') == 'auto') {
                  $(this).html(showText);
                  text.css('height', maxheight + 'px');
              } else {
                  $(this).html(hideText);
                  text.css('height', 'auto');
              }
            });
        }       
      });
  });

The html code is:

<div class="textContainer_Truncate">
  <p>content</p>
</div>

My problem is that the “more” link works but the “less” doesn’t. That is, when more is clicked, the text is expanded but it won’t go back when the less is clicked.What’s wrong here?
Thanks

Answer 1

It’s just a small error, this:

if (text.css('height') == 'auto') {

should be this:

if (text.height() > maxheight) {

FIDDLE