【jQuery】文章が長いときのみグラデーションで隠して続きを読む・閉じるを表示

<div class="box">
<p>長いときは表示される。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。</p>
</div>

.box {
      position: relative;
      margin-bottom: 20px;
      padding: 0 20px 30px;
      height: auto;
      overflow: hidden;
    }
    .box_more {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 30px;
      padding-top: 70px;
      text-align: center;
      line-height: 2em;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 70%);
      cursor: pointer;
    }
    .is-open .box_more {
      background: transparent;
    }
    .box_more::before {
      color: #555;
      content: '＋続きを読む';
      font-size: 12px;
      display: inline-block;
      position: absolute;
      width: 100%;
      text-align: center;
      bottom: 0;
      left: 0;
    }
    .is-active .box_more::before {
      content: '−閉じる';
    }

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    $(function(){
      let min_height = 150; //高さ調整
      let ani_duration = 300; //アニメーション実行時間（ミリ秒）

      $('.box').each(function(index) {
        if ($(this).height()>min_height + 50) {//min_height + 50px以上になったら追加
          $(this).height(min_height).append('<div class="box_more"></div>');
        }
      });

      $('.box_more').click(function(){
        let athis = $(this);
        let show_text = athis.parent('.box');
        let original_height = show_text.css({height : 'auto'}).height();

        if(show_text.hasClass('is-open')){
          //--CLOSE--
          let scroll_offset = $("html,body").scrollTop() - original_height + min_height;

          $("html,body").animate({ scrollTop: scroll_offset }, ani_duration);
          show_text.animate({height:min_height}, ani_duration, function(){
          });
          show_text.removeClass('is-active').removeClass('is-open');
        }else{
            //--OPEN--
            show_text.height(min_height).animate({height:original_height},ani_duration, function(){
            show_text.height('auto').addClass('is-open');
          });
          show_text.addClass('is-active');
        }
      });
    });
    </script>