Bubbleでアコーディオンメニューを実装する方法【1つ開くと他は閉じる】

2024年1月24日2024年7月1日

著者：大熊滉希
ノーコード特化のアプリ/システム開発事業を展開するEPICsの代表。
前職にて新規事業コンサルティングを行う企業で役員を歴任した後、
最小の経営資源で開発を行えるノーコードに可能性を感じEPICsを創業。

運営会社：EPICs株式会社
日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社。
最安30万円・最短2週間から、BubbleやAdaloなど多様なツールの中からニーズに合わせた最適な開発を提案・実施している。Adalo公認エキスパートも在籍。

ノーコードツール「Bubble」でアコーディオンメニューを作る方法をご紹介。

アコーディオンメニューとはWebサイトのFAQ（よくある質問集）で用いられる事が多い開閉式のコンテンツです。

Bubbleフォーラムで英語検索したら非常に優れた無料テンプレートを発見しまして、そちらを自分なりに改良したバージョンの作り方を今回は解説します。

動画解説バージョンはこちら！

なお、ノーコードBubbleの概要については以下の記事で解説しています。

【日本最大級のノーコード開発実績】
無料でアプリ・システム開発の相談を受付中

実装イメージ

質問文ブロックをクリックしたら、非表示になっていた説明文ブロックが表示され、矢印アイコンの向きが変わるというよく見かけるアコーディオンメニューを実装します。１つアコーディオンを開くと、他のが開いていたとしても閉じる仕様です！

アコーディオンメニュー全体の構造は以下の通りです。

RepeatingGroupの中にGroupを２つ入れ、その中にそれぞれQAアイコン、テキストデータ、矢印アイコンを設置する感じ。

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

まず最初に、FAQ用のData type「Faq」を作成します。

fieldには、質問文を入れるtitleと、説明文を入れるdescriptionをtext型で追加します。

FAQはRepeatingGroupを使って表示するので以下のようなテストデータを５件ほど入れます。

title	description
質問が入ります。質問が入ります。質問が入ります。質問が入ります。質問が入ります。	説明テキストが入ります。説明テキストが入ります。説明テキストが入ります。
このサービスは無料ですか？	はい、当社の基本サービスは無料です。ただし、一部のプレミアム機能には料金がかかることがあります。
アカウントを削除する方法はありますか？	はい、アカウントを削除するにはログインしてアカウント設定ページにアクセスし、削除オプションを選択してください。アカウントを削除する前にデータのバックアップをお勧めします。
パスワードをリセットするにはどうすればいいですか？	パスワードをリセットするには、ログイン画面で「パスワードをお忘れですか？」リンクをクリックし、指示に従ってください。リセット用のリンクがメールで送信されます。