BricksBuilderには、「アコーディオン」と「アコーディオン（ネスト可能）」の2種類のアコーディオンエレメントがあります。
今回は、この2つの違いについて、機能面・用途面から詳しく比較して解説します。
アコーディオンとアコーディオン（ネスト可能）
Bricksのエレメント検索で「アコーディオン」と入力すると、「アコーディオン」と「アコーディオン（ネスト可能）」の2つが表示されます（下図参照）。
一見よく似ていますが、構造と使いどころが大きく異なります。
アコーディオンエレメントの特徴
アコーディオンエレメントは、ひとつのエレメント内で完結するシンプルな構造です。
- タイトル
- サブタイトル
- コンテンツ
この3つのテキスト要素で構成されています（下図参照）。
FAQスキーマについて
また、アコーディオンには 「FAQスキーマ」 という機能があります（下図参照）。
FAQスキーマをONにすると、このアコーディオンを FAQ（よくある質問）としてGoogleに認識させることができます。
FAQスキーマとは、Webページに掲載している「よくある質問（FAQ）」の内容を、検索エンジンが正しく理解できるようにする 構造化データ です。
アコーディオンのアイコン
アコーディオンでは、
- 閉じたときのアイコン
- 開いたときのアイコン
をそれぞれ個別に設定することが可能です（下図参照）。
アコーディオン（ネスト可能）の特徴
アコーディオン（ネスト可能）は、タイトル部分・コンテンツ部分のどちらにもエレメントを自由に配置できるのが最大の特徴です。
- テキスト
- アイコン
- 画像
- ボタン
- レイアウト用コンテナ
などを組み合わせて、柔軟なデザインが可能です。
アコーディオン（ネスト可能）の活用方法
アコーディオン（ネスト可能）を使うと、たとえば、コンテンツ部分に外観のメニューで作ったメニューを入れることでドロップダウンのように見せることができます。
また、コンテンツの一部を見せて、「つづきはこちら」とその続きを読ませるといったギミックにも活用できそうです。
お問い合わせフォームを隠しておいて、クリックした人にだけ表示させるという効果も面白そうです。
アコーディオン（ネスト可能）のアイコン
アコーディオン（ネスト可能）の場合は、アイコンを2つ並べて配置します。
- 折りたたみ状態用のアイコン
- 展開時用のアイコン
をそれぞれ表示・非表示で切り替える形になります（下図参照）。
まとめ
アコーディオンとアコーディオン（ネスト可能）の違いは、「テキストのみか」「エレメントを自由に使えるか」 という点に集約されます。
- FAQ用途・シンプルなQ&A
→ アコーディオンがおすすめ - 画像やボタンを含めた高機能なUI
→ **アコーディオン（ネスト可能）**がおすすめ
用途に応じて、使い分けることでBricksBuilderの強みを最大限に活かせます。
