Cocoonでアコーディオンをデフォルトで開く方法！【jQuery不要】

Cocoonのテーマを使ったサイトで記事内に表示できる「アコーディオン（トグルボックス）」ですが、デフォルトでは必ず「閉じた状態」で表示されるようになっています。

しかし、重要な補足説明など、最初から開いておいて読者の目に入りやすくしたい場合もありますよね。

例えば、ためセル！の場合だと、よくある質問や手順の補足などでトグルを使いますが、クリックしないと中身が見えないため、気づかれずにスルーされてしまって困ることがあります。

ということで、このページでは、Cocoonでアコーディオンをデフォルトで開く方法！【jQuery不要】についてご紹介します。

スグにためセル！ – ここを読めばすぐ使える

※　より詳しい解説はここから下に続きます。

アコーディオン（トグル）を最初から開いておきたい

テーマ「Cocoon」で作成したサイトには、クリックすると中身が開く「トグルボックス（アコーディオン）」という便利なブロックがあります。
当サイト「ためセル！」でも、少し長くなる補足説明などをスッキリまとめるためによく使っています。

そんなトグルブロックですが、設定画面などには「最初から開いておく」というオプションがありません。

ネットで検索すると、JavaScript（jQuery）を使って無理やり開く方法が多く紹介されていますが、この方法だと「ページが開いた瞬間に一瞬閉じた状態が見えてから、パカッと開く」というチラつき（レイアウトシフト）が起きてしまうことがあります。

実は、WordPressの出力設定（PHP）を少しだけ編集することで、チラつきなく最初からキレイに開いた状態にすることができますので、ご紹介します。

特定のトグルだけデフォルトで開く方法

それでは、ここからトグルをデフォルトで開く方法についてご紹介していきましょう。

ここからは、テーマファイルやHTMLファイルなどを直接編集します。この編集を間違えると、最悪サイトが表示されなくなる場合もありますで、編集するファイルは必ずバックアップを取り、自己責任の上で作業を行ってください。

functions.phpの編集

特定のトグルだけを開くには、下記のコードを子テーマの「functions.php」ファイルの一番下に追記します。

// 特定のクラス（is-default-open）がついたアコーディオンをデフォルトで開く
add_filter( 'render_block', function( $block_content, $block ) {
  // ブロックのクラス名に 'is-default-open' が含まれているかチェック
  if ( ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'is-default-open' ) !== false ) {
    // 出力されるHTMLのチェックボックス部分に「checked」属性を差し込む
    $block_content = str_replace( 
      'class="toggle-checkbox" type="checkbox"', 
      'class="toggle-checkbox" type="checkbox" checked', 
      $block_content 
    );
  }
  return $block_content;
}, 10, 2 );

このコードは、「is-default-openという目印（クラス）がついているトグルブロックが出力されるときだけ、最初から開く状態にする（checkedを付ける）」という指示を出しています。

追加のCSSクラスを設定する

functions.phpへの記述が終わったら、記事の編集画面（ブロックエディタ）を開きます。

これだけで設定は完了です！プレビュー画面や実際の公開ページを見て、最初からトグルが開いていることを確認してください。

【応用】基本は開いておき、特定のトグルだけ閉じる方法

「自分のサイトでは、トグルは基本的にすべて開いた状態にしておきたい！」という方もいるかもしれません。毎回すべてのトグルにクラス名を入力するのはめんどくさいですよね・・・。

そこで、逆に「基本はすべて開いた状態にして、閉じたいものにだけ特定のクラスを付与する」という方法もご紹介します。

functions.phpの編集（逆パターン）

基本をすべて開いた状態にするには、こちらのコードをfunctions.phpに追記します。

// すべてのアコーディオンをデフォルトで開き、「is-default-closed」がついている場合のみ閉じる
add_filter( 'render_block', function( $block_content, $block ) {
  // Cocoonのアコーディオン（トグル）ブロックであるかチェック
  if ( strpos( $block_content, 'cocoon-block-toggle' ) !== false ) {
    
    // ブロックに「is-default-closed」クラスが含まれていなければ、開く（checkedを付与）
    if ( strpos( $block_content, 'is-default-closed' ) === false ) {
      $block_content = str_replace( 
        'class="toggle-checkbox" type="checkbox"', 
        'class="toggle-checkbox" type="checkbox" checked', 
        $block_content 
      );
    }
    
  }
  return $block_content;
}, 10, 2 );

このコードを追加した時点で、サイト内のすべてのアコーディオン（トグル）が、デフォルトで開いた状態になります。

特定のトグルだけを「閉じる」設定

もし「このトグルだけは最初から閉じておきたい」というものがあれば、先ほどと同じようにブロックエディタの「追加のCSSクラス」を設定します。

今回は閉じるための目印なので、追加のCSSクラスには is-default-closed と入力してください。

これで、基本はすべてオープン、指定したものだけクローズ、という自由な使い分けができるようになります。

まとめ

Cocoonのサイトでは、トグルブロック（アコーディオン）は標準で閉じた状態になっていますが、設定画面からは変更できません。

しかし、functions.phpに少しコードを追加するだけで、特定のクラスを付けたものを開いたり、逆に閉じたりと、自由にコントロールすることができます。

JavaScript（jQuery）を使わないため、画面のチラつきもなく、ページの表示速度にも悪影響を与えません。
トグルブロックをより効果的に見せたい場合は、ぜひお試しください。

以上、このページでは、Cocoonでアコーディオンをデフォルトで開く方法！【jQuery不要】についてご紹介しました。