divの高さを動的にアニメーション化しながらテキストを切り替える

Question

オーバーフローするテキストを含むdivの高さが固定されています。オーバーフローをhiddenに設定し、リンクが押された場合は残りのテキストを内側に表示するようにdiv heightを展開します。リンクをもう一度押すとdivを元の高さに戻します。私は私が欲しいものである次のquestionを見つけましたが、テキストは2 pタグに分割されていますが、私は1つしか持っていません。私はこれを試してみましたが、私は次のエラーを取得：

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

ここでは私のcode

任意の助けをいただければ幸いです。

Answer 1

問題が要素になっていた。..

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'); 

    } 
    } 

});