在动态设置div高度时切换文本

Question

I have a fixed div height with some text that overflows. I've set the overflow to hidden and want to expand the div height to display the rest of text inside if a link is pressed; then return the div to its initial height when the link is pressed again. I came across the following question which is what I want, however their text is broken up into 2 p tags whereas I only have one. I tried this but I get the following error:

Unable to get property 'scrollHeight' of undefined or null reference

Here is my code

Any help would be appreciated.

Answer 1

the problem was getting the element..

check the result

$(function() {

  if ($('#dialog-box').is(':visible')) {
    showMoreTextDialog();
  }

  function showMoreTextDialog() {

    var dialog_txt = $('.dialog_middle p').html();

    if (dialog_txt.length > 350) {

      var append_dialog = dialog_txt.substr(0, 350);

      $('.dialog_middle p')
        .html(append_dialog)
        .append('<span class="showMore">    (.... Show More )</span>');

      $('.dialog_middle')
        .data("original-height", $(".dialog_middle")[0].scrollHeight);

      $(document).on({
        'mouseover': function() {
          $(this).css('cursor', 'pointer');
        },
        'click': function() {

          $('.dialog_middle p')
            .html(dialog_txt)
            .append('<span class="showLess">    (.... Show Less )</span>');

          $('.dialog_middle')
            .animate({
              height: $(".dialog_middle")[0].scrollHeight
            }, 2000);

        }
      }, '.dialog_middle .showMore');

      $(document).on({
        'mouseover': function() {
          $(this).css('cursor', 'pointer');
        },
        'click': function() {

          $('.dialog_middle')
            .animate({
              height: $(".dialog_middle").data("original-height")
            }, 2000, function() {

              $('.dialog_middle p')
                .html(append_dialog)
                .append('<span class="showMore">    (.... Show More )</span>');

            });

        }
      }, '.dialog_middle .showLess');

    }
  }

});