WordPressのリストをアコーディオンにする方法｜動く見本とCSS・JavaScript

<!-- wp:list -->
<ul class="wp-block-list"><!-- wp:list-item {"className":"waza-list-toggle"} -->
<li class="waza-list-toggle"><strong>実装の準備</strong><!-- wp:list -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li><a href="https://motoki-design.co.jp/wordpress/swell-customize-css/">CSSの貼り付け先と戻し方</a></li>
<!-- /wp:list-item --><!-- wp:list-item -->
<li><a href="https://motoki-design.co.jp/wordpress/swell-child-theme/">子テーマが必要か確認する</a></li>
<!-- /wp:list-item --></ul><!-- /wp:list --></li><!-- /wp:list-item -->
<!-- wp:list-item {"className":"waza-list-toggle is-open"} -->
<li class="waza-list-toggle is-open"><strong>作りたい表示を選ぶ</strong><!-- wp:list -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li><a href="https://motoki-design.co.jp/wordpress/swell-customize-matome/">目的別のカスタマイズ一覧</a></li>
<!-- /wp:list-item --><!-- wp:list-item -->
<li><a href="https://motoki-design.co.jp/wordpress/swell-block-visual-list/">ブロックの見本を比べる</a></li>
<!-- /wp:list-item --></ul><!-- /wp:list --></li><!-- /wp:list-item --></ul>
<!-- /wp:list -->

li.waza-list-toggle { list-style: none; }
.waza-list-toggle > [hidden] { display: none !important; }
.waza-list-toggle > .waza-list-toggle-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  width: 100%;
  min-height: 44px;
  padding: .7em 1em;
  border: 1px solid #888;
  border-radius: 4px;
  background: #fff;
  color: #333;
  font: inherit;
  font-weight: bold;
  text-align: left;
  cursor: pointer;
}
.waza-list-toggle-button::after { content: '+'; }
.waza-list-toggle-button[aria-expanded="true"]::after { content: '−'; }
.waza-list-toggle > .waza-list-toggle-button:focus-visible {
  outline: 3px solid #245bba;
  outline-offset: 3px;
}

(function () {
  function init() {
    document.querySelectorAll('li.waza-list-toggle').forEach(function (item, index) {
      if (item.dataset.wazaReady) return;
      const label = Array.from(item.children).find(function (el) { return el.tagName === 'STRONG'; });
      const list = Array.from(item.children).find(function (el) { return el.tagName === 'UL' || el.tagName === 'OL'; });
      if (!label || !list || label.querySelector('a, button')) return;
      const button = document.createElement('button');
      button.type = 'button';
      button.className = 'waza-list-toggle-button';
      button.textContent = label.textContent;
      let id = 'waza-list-panel-' + index;
      while (document.getElementById(id)) id += '-x';
      if (!list.id) list.id = id;
      button.setAttribute('aria-controls', list.id);
      const expanded = item.classList.contains('is-open');
      button.setAttribute('aria-expanded', String(expanded));
      list.hidden = !expanded;
      label.replaceWith(button);
      button.addEventListener('click', function () {
        const open = button.getAttribute('aria-expanded') === 'true';
        button.setAttribute('aria-expanded', String(!open));
        list.hidden = open;
      });
      item.dataset.wazaReady = '1';
    });
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init, { once: true });
  else init();
})();