「カテゴリー」ウィジェットの子カテゴリーを折りたたみ表示する方法

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

jQuery(function ($) {
  $(".widget_categories").each(function () {
    // 子カテゴリーを非表示
    $('.children', this).hide();

    // 子カテゴリーリストの直前にボタンを追加
    $('.children', this).before('<div class="category-list__toggle"></div>');

    // ボタンクリックの場合
    $('.category-list__toggle', this).click(function () {
      // 直後にある子カテゴリーリストの表示を切り替え
      $(this).next('ul').toggle();

      $(this).toggleClass('active');
    });
  });
});

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

.body .widget_categories {
  ul {
    padding-left: 0;
  }

  li {
    position: relative;
  }

  a {
    padding: 3px 2em 3px 0;
  }
}

.category-list__toggle {
  border: 1px solid #ccc;
  cursor: pointer;
  display: grid;
  height: 20px;
  place-content: center;
  position: absolute;
  right: 5px;
  top: 8px;
  width: 20px;

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

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