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

2024年1月24日

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

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

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

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

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

また、本メディアを運営する「EPICs株式会社」は、ノーコードを活用したアプリ・システム開発を行っております。大手ノーコードツールであるBubbleからも、公式代理店として認定されています。

従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。

日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。

EPICs株式会社の特徴

ざっくりの課題でも
プロが無料で提案

実装イメージ

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

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

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

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

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

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

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

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