「アーカイブ」ウィジェットを年単位で折りたたみ表示する方法

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

jQuery(function ($) {
  $('.widget_archive').each(function () {
    const widget = $(this);
    const name = widget.attr('id') || 'archive-details';
    let html = '<div class="archive">';
    let currentYear = '';
    let open = ' open';

    $('li', widget).each(function () {
      const li = $(this);
      const year = li.text().slice(0, 4);

      // 年が切り替わったら月リストを追加
      if (year !== currentYear) {
        if (currentYear !== '') {
          html += '</details>';
        }
        currentYear = year;

        html += `<details class="archive__year" name="${name}"${open}><summary class="archive__summary">${year}年</summary>`;
        open = '';
      }

      // 年ごとの月リストを作成
      html += li.html().replace(/(\d+)年/, '');
    });

    html += '</details></div>';

    $('ul', widget).replaceWith(html);
  });
});

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

.archive__summary {
  cursor: pointer;
  list-style: none;

  /* Safari対応 */
  &::-webkit-details-marker {
    display: none;
  }

  &::before {
    content: '\f07b';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    padding-right: 0.5em;

    .archive__year[open] & {
      content: '\f07c';
    }
  }
}

.archive {
  a {
    color: var(--cocoon-text-color);
    display: flex;
    justify-content: space-between;
    text-decoration: none;
  }

  .list-item-caption {
    text-align: right;
    width: 4em;
  }
}