【SWELL】FAQブロックの回答を折りたたんでアコーディオン的にしてみた作業メモ

2023年12月更新しました。

WordPressテーマSWELLのFAQブロックをカスタマイズして、アコーディオン機能を付けた作業メモです。

まずはサンプルです↓

FAQブロックに折りたたみ機能を追加

上の画像はGIFアニメーションです。再生されないかもしれないので、静止画像も付けます↓

ページアクセス時には、全部の回答（Q）が折りたたまれて閉じた状態↓

【SWELL】ページアクセス時にはFAQブロックの回答が閉じている

質問部分（Q）をクリックすると、回答（A）部分が開く↓

【SWELL】ページアクセス時にはFAQブロックの質問をクリックすると回答が開く

SWELLのFAQブロックにはアコーディオンブロックのような折りたたみ機能は付いていません。

今回のカスタマイズでは、

ページアクセス時に、FAQブロックの全部の回答（A）が折りたたまれている状態に変更。質問（Q）をクリックすると、該当の答え部分のみが開くという仕様に変更します。

あまりWordPressが得意でないクライアントでも使えるよう、ブロックエディター上でのFAQブロックの操作性はそのままにしています。

カスタマイズ概要

カスタマイズの内容についてです。

まず、テーマファイルは編集しません。子テーマは不要、プラグインも不要です（子テーマを使っていても構いません）。

作業内容は「CSSコード」「スクリプトコード」を貼るだけ。

かかる時間は３分程度。

テンプレートファイルを編集しないカスタマイズなので、作業ミスでサイトが真っ白になるようなことはありません。

【サンプルサイトの構成と検証環境について】

• WordPress：6.1.1

• SWELL：2.7.2.1

Windows環境のGoogle Chrome、Edge、Firefoxで動作確認をしています（ブラウザは記事執筆時に利用可能な最新バージョンです。）

記事更新履歴

• 2023年12月　記事更新（SWELL 2.8.1動作確認済み）

• 2023年2月　記事更新

• 2023年1月　記事公開

有料記事部分では次のカスタマイズコードを紹介しています。

・ページアクセス時に、全セットが閉じた状態にする方法。
・ページアクセス時に、最初のQのみ開いた状態（他のQは閉じたまま）にする方法
・FAQ開閉状態が分かるアイコンを表示する方法