「アコーディオン(トグル)」「FAQ」ブロックで1つだけ開き他を閉じる方法

Cocoonカスタマイズ集
この記事は約11分で読めます。
記事内に広告が含まれています。

はじめに

以下をCocoonで実現します。

「アコーディオン(トグル)」ブロックまたは「FAQ」ブロックをグループ化し、クリックしたブロックのみを開き、他のブロックは全て閉じるように変更します。

この記事では、この方法について説明します。

「アコーディオン(トグル)」ブロックの場合

完成イメージ

生物の記憶とスタンド能力を、CDのような形状の「DISC」にして取り出す、能力を持つ。

ホワイトスネイクと、緑色の赤ちゃんが融合してできたスタンド。
半径約3km以内にある物体の重力の方向を、本体のプッチ神父を中心に、逆転させる能力を持つ。

C-MOONが進化したスタンド。
全世界の時を、加速させる能力を持つ。

実装手順

以下の手順で実装します。

  • ラベル
    Gutenbergエディターでの設定
    Gutenbergエディター

    以下の手順で設定します。

    1. 複数の「アコーディオン(トグル)」ブロックを選択し「グループ化」とします。
  • ラベル
    JavaScriptを追加

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

    jQuery(function ($) {
      // 各グループの初期化
      $('.wp-block-group').each(function () {
        // グループ内にある1番目の「アコーディオン(トグル)」を開く
        $('.toggle-box input[type="checkbox"]:first', this).prop('checked', true);
      });
    
      // 「アコーディオン(トグル)」クリックの場合
      $('.toggle-box input[type="checkbox"]').on('click', function () {
        // クリックされたチェックボックスが属する親のブロックグループを取得
        var $parentGroup = $(this).closest('.wp-block-group');
    
        // 同じグループ内にあるクリックされたもの以外のは閉じる)
        $('.toggle-box input[type="checkbox"]', $parentGroup).not(this).prop('checked', false);
      });
    });

「FAQ」ブロックの場合

完成イメージ

Q
ホワイトスネイク
A

生物の記憶とスタンド能力を、CDのような形状の「DISC」にして取り出す、能力を持つ。

Q
C-MOON
A

ホワイトスネイクと、緑色の赤ちゃんが融合してできたスタンド。
半径約3km以内にある物体の重力の方向を、本体のプッチ神父を中心に、逆転させる能力を持つ。

Q
メイド・イン・ヘブン
A

C-MOONが進化したスタンド。
全世界の時を、加速させる能力を持つ。

実装手順

  • ラベル
    Gutenbergエディターでの設定

    「アコーディオン(トグル)」ブロックと同様です。

  • ラベル
    JavaScriptを追加

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

    jQuery(function ($) {
      // DOMツリーの構築が完了したタイミングで「FAQ」の初期化とイベント設定を行う
      $(document).ready(function () {
        const $questions = $('.is-style-accordion > .faq > .faq-question');
    
        // 各グループの初期化
        $('.wp-block-group').each(function () {
          const $accordionFaqs = $(this).find('.is-style-accordion > .faq');
    
          // グループ内にあるすべての「FAQ」を閉じる
          $accordionFaqs.find('.faq-question').removeClass('active');
          $accordionFaqs.find('.faq-answer').hide();
    
          // グループ内における1番目の「FAQ」を開く
          $accordionFaqs.find('.faq-question').eq(0).addClass('active');
          $accordionFaqs.find('.faq-answer').eq(0).show();
        });
    
        // 「FAQ」をクリックした処理
        $questions.off('click').on('click', function (e) {
          // 要素本来のクリック挙動を無効化する
          e.preventDefault();
    
          const $this = $(this);
          const $group = $this.closest('.wp-block-group');
    
          if ($group.length) {
            const $siblingFaqs = $group.find('.is-style-accordion > .faq');
    
            // 同じグループにあるクリックされたもの以外を閉じる
            $siblingFaqs.find('.faq-question').not($this).removeClass('active');
            $siblingFaqs.find('.faq-answer').not($this.next()).hide();
          }
    
          // クリックされた「FAQ」を開閉
          $this.toggleClass('active').next('.faq-answer').toggle();
        });
      });
    });

「アコーディオン(トグル)」ブロックと「FAQ」ブロックの違い

<div class="wp-block-cocoon-blocks-toggle-box-1 toggle-wrap toggle-box block-box not-nested-style cocoon-block-toggle">
  <input id="toggle-checkbox-202412271329270" class="toggle-checkbox" type="checkbox">
  <label class="toggle-button" for="toggle-checkbox-202412271329270">アコーディオン見出し</label>
  <div class="toggle-content">
  </div>
</div>
「アコーディオン(トグル)」ブロック
<div class="wp-block-cocoon-blocks-faq faq-wrap blank-box block-box not-nested-style cocoon-block-faq is-style-accordion">
  <dl class="faq">
    <dt class="faq-question faq-item">
      <div class="faq-question-label faq-item-label">Q</div>
      <div class="faq-question-content faq-item-content">
      </div>
    </dt>
    <dd class="faq-answer faq-item" style="display: none;">
      <div class="faq-answer-label faq-item-label">A</div>
      <div class="faq-answer-content faq-item-content">
      </div>
    </dd>
  </dl>
</div>
「FAQ」ブロック

「アコーディオン(トグル)」ブロックと「FAQ」ブロックでは、HTMLの構造が大きく異なります。
本来、「FAQ」ブロックは開閉させることを前提としたHTML構造ではありませんが、選択したスタイルに応じて、JavaScriptを用いることで開閉動作を実現しています。

WordPress 6.9で追加された「アコーディオン」ブロックとの違い

WordPress 6.9で、新たに「アコーディオン」ブロックが標準機能として追加されました。
Cocoonの「アコーディオン(トグル)」ブロックとは異なり、複数のアコーディオンを並べた際、その内1つだけを開いた状態にできる設定が、デフォルトで備わっています。

さいごに

今回紹介した方法を使えば、クリックしたブロックだけを開く直感的なインターフェイスを実現できます。
「アコーディオン(トグル)」ブロックや「FAQ」ブロックを簡単にカスタマイズ可能です。

タイトルとURLをコピーしました