【jQuery】長文を省略して「もっと見る」ボタンで開閉する実装方法｜PC・スマホ別の高さ指定＆グラデーション付き

<div class="viewExpand" data-height-pc="300px" data-height-sp="500px">
  <div class="viewExpand__contents">
    <div>
      <p>ここにコンテンツが入ります...</p>
      <p>ダミーテキスト...</p>
    </div>
  </div>
  <button class="viewExpand__button" type="button" aria-label="もっと見る" data-close-label="閉じる"></button>
</div>

.viewExpand{
  position: relative;
}
.viewExpand__contents{
  /* オーバーレイが被る分、下の余白を確保 */
  padding-bottom: var(--view-expand-overlay-height) ;
}
/* グラデーションのぼかし部分 */
.viewExpand__overlay{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--view-expand-overlay-height);
  /* 下に行くにつれて白くなるグラデーション */
  background: linear-gradient(180deg,rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%);
  pointer-events: none;
  z-index: 1;
}
.viewExpand__button{
  -webkit-appearance: none;
  border: 1px solid #000;
  border-radius: 5px;
  background-color: #fff;
  color: #000;
  /* 中央寄せ配置 */
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: var(--view-expand-btn-height);
  font-size: 13px;
  z-index: 2;
  transition: .5s;
  cursor: pointer;
}
@media (hover: hover){
  .viewExpand__button:hover{
    opacity: 0.7;
  }
}
/* レスポンシブ設定 */
@media screen and (min-width: 768px){
  .viewExpand{
    --view-expand-btn-height: 60px;
    --view-expand-overlay-height: 100px;
  }
}
@media screen and (max-width: 767px){
  .viewExpand{
    --view-expand-btn-height: 50px;
    --view-expand-overlay-height: 100px;
  }
}

$(function () {
  var SP_BREAK = 768; // ブレイクポイントの設定

  $('.viewExpand').each(function () {
    var $view = $(this),
      $cont = $view.find('.viewExpand__contents'),
      $btn = $view.find('.viewExpand__button');

    // 現在のウィンドウ幅に応じて高さを取得する関数
    function viewExpandGetLimit() {
      return parseInt($(window).width() < SP_BREAK
        ? $view.data('height-sp')
        : $view.data('height-pc'), 10);
    }

    // 閉じる（折りたたむ）処理
    function viewExpandCollapse() {
      var limit = viewExpandGetLimit(),
        curH = $cont.get(0).scrollHeight;
      
      $cont.stop()
        .css({ height: curH + 'px', overflow: 'hidden' })
        .animate({ height: limit + 'px' }, 400, 'swing', function () {
          $cont.css({ height: '', 'max-height': limit + 'px' });
          // グラデーションオーバーレイを再生成
          if (!$view.find('.viewExpand__overlay').length) {
            $('<div class="viewExpand__overlay"></div>').insertBefore($btn);
          }
          // ボタンのテキストを変更
          $btn.text($btn.attr('aria-label'));
        });
    }

    // 開く（展開する）処理
    function viewExpandExpand() {
      var limit = viewExpandGetLimit(),
        fullH = $cont.get(0).scrollHeight;

      $cont.stop()
        .css({ 'max-height': '', height: limit + 'px', overflow: 'hidden' })
        .animate({ height: fullH + 'px' }, 400, 'swing', function () {
          $cont.css({ height: '', overflow: '' });
          // 開ききったらオーバーレイを削除
          $view.find('.viewExpand__overlay').remove();
          // ボタンのテキストを変更
          $btn.text($btn.data('close-label'));
        });
    }

    // 初期実行
    viewExpandCollapse();

    // クリックイベント
    $btn.on('click', function () {
      if ($view.hasClass('is-expanded')) {
        $view.removeClass('is-expanded');
        viewExpandCollapse();
      } else {
        $view.addClass('is-expanded');
        viewExpandExpand();
      }
    });

    // リサイズ時の調整
    $(window).on('resize', function () {
      if (!$view.hasClass('is-expanded')) viewExpandCollapse();
    });
  });
});