本文中の目次を折りたたみ表示する方法

以下のコードをjavascript.jsに追加します。

jQuery(function ($) {
  // もっと見るボタンのHTMLを設定
  const button = '<div class="toc__more"></div>';

  // 折りたたみ対象とする目次の階層を設定
  const DEPTH = 3;

  // 記事メインエリア内にある目次コンテナを取得
  $('.main .toc-content').each(function () {
    const $content = $(this);

    // 指定した階層以降にあるリスト項目を取得
    const $targets = $content.find('li').filter(function () {
      // 現在の項目より上位にあるリスト項目の数を取得
      return $(this).parentsUntil($content, 'li').length >= DEPTH - 1;
    });

    // 折りたたみ対象が存在しない場合は処理対象外
    if (!$targets.length) {
      return;
    }

    // 折りたたみ対象を初期状態で非表示に設定
    $targets.hide();

    // 目次の末尾にもっと見るボタンを登録
    const $btn = $(button).appendTo($content);

    // もっと見るボタンのクリックイベントを登録
    $btn.on('click', function () {
      // ボタンの開閉状態を active クラスで変更
      $btn.toggleClass('active');

      // active の状態に合わせて対象項目を表示・非表示
      $targets.toggle($btn.hasClass('active'));
    });
  });
});

以下のコードをstyle.cssに追加します。

.toc__more {
  border: 1px solid #ccc;
  cursor: pointer;
  display: grid;
  height: 20px;
  padding: 2px;
  place-content: center;
  width: 100%;

  &::before {
    color: #ccc;
    content: '\f078';
    display: block;
    font-family: 'Font Awesome 5 Free';
    font-size: 5px;
    font-weight: bold;
  }

  &.active::before {
    content: '\f077';
  }
}

以下のコードをjavascript.jsに追加します。

jQuery(function ($) {
  // もっと見るボタンのHTMLを設定
  const button = '<div class="toc__more"></div>';

  // 折りたたみ対象とする目次の項目数を設定
  const limit = 10;

  // 記事メインエリア内にある目次コンテナを取得
  $('.main .toc-content').each(function () {
    const $content = $(this);

    // 目次内にあるリスト項目を取得
    const $items = $content.find('li');

    // 目次の項目数を取得
    const count = $items.length;

    // 項目数が指定した制限を超えていない場合は処理対象外
    if (count <= limit) {
      return;
    }

    // 制限数以降の項目を取得
    const $targets = $items.slice(limit);

    // 折りたたみ対象を初期状態で非表示に設定
    $targets.hide();

    // 目次の末尾にもっと見るボタンを登録
    const $btn = $(button).appendTo($content);

    // もっと見るボタンのクリックイベントを登録
    $btn.on('click', function () {
      // ボタンの開閉状態を active クラスで変更
      $btn.toggleClass('active');

      // active の状態に合わせて対象項目を表示・非表示
      $targets.toggle($btn.hasClass('active'));
    });
  });
});

前述のコードをstyle.cssに追加します。