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

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

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

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

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

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

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

目次
日本最大級のノーコード開発実績!

①日本最大級の開発実績
②最安30万円。通常の1/10~の低コスト開発
③最短2週間。圧倒的な開発スピード
④高難易度の開発もスムーズ
⑤複数のノーコードツールに対応

EPICsは上記5つの強みを武器に受託開発を行っています。
まずはご相談ください。

実装イメージ

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

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

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

実装手順

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

  1. FAQの内容を保存するData type「Faq」を作成する
  2. RepeatingGroupを設置する
  3. RGの中にGroup Questionを設置する
  4. RGの中にGroup Answerを設置する
  5. Group QuestionをクリックしたときのWorkflowを2つ設定する

FAQの内容を保存するData type「Faq」を作成する

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

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

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

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

RepeatingGroupを設置する

FAQのデータを表示するRepeatingGroup(以下RGと記載)をページに設置します。

  • Type of content:FAQのデータが入っているData type「Faq」を選択する
  • Data source:Faqのデータを使用するのでDo a Search forでFaqを選択する
  • Rowsは表示させたい件数を設定する
  • Faqは基本1列なのでColumnsは1のママでOK
  • SeparatorsはNoneにする(余計なボーダーが入っちゃうので)
  • Layoutタブのcontainer layoutはColumnにする

あと、今回の肝となる設定で、Custom stateを追加します。

Custom state名はOpen Faqで、タイプはFaqにします。

RGの中にGroup Questionを設置する

次にRGの中に質問文ブロックと説明文ブロックのためのGroup Question・Group Answerをそれぞれ追加します。

2つのGroupの完成形

Group QuestionはQアイコン、テキスト、矢印アイコンの3要素から成ります。まずGroup Questionの作りを紹介します。重要部分以外は割愛しますね。

  • [ Type of content ]Faq
  • [ Data source ]Current cell’s Faq
  • [ Layout ]Align to parent
  • [ Margin ]Bottomに16px
  • [ Padding ]上下16px、左右8px
  • [ Width ]560px
  • [ Min-height ]0
  • [ Background color ]#EEEEEE
  • [ Conditional ]Group Answer is visibleのときにBackground colorを#B2ACACにする

次にQアイコンの作り方です。

  • [ WidthとHeight ]32px
  • [ Layout ]左端
  • [ Line spacing ]2
  • [ Background color ]#64CCC5
  • [ Roundness ]9999

次に、質問文が入るTextエレメントの作り方。

  • [ 表示するテキスト ]Parent group's Faq's title
  • [ Layout ]真ん中に配置
  • [ Width ]84%
  • [ Color ]#555555
  • [ Conditional ]Group Answer is visibleのときにFont colorを#FFFFFFにする

次に矢印アイコンの作り方。

  • Iconエレメントで作成する、初期状態は下矢印アイコンを選択
  • [ Icon color ]#091747
  • [ Layout ]右端に配置
  • [ WidthとHeight ]24px
  • [ Conditional ]Group Answer is visibleのときに上矢印アイコンに変えて、Icon colorを白にする

RGの中にGroup Answerを設置する

次に、Group Answerの解説です。上述したQuestionとほとんど同じなので、重要な箇所のみ紹介します。

Answerブロックは最初は非表示にしておきたいのでThis element is visible on page loadのチェックを外し、すぐ下のCollapse when hiddenにチェックを入れましょう。

表示切り替えはクリックしたときのCustom stateで操作します。

When RepeatingGroup Faq's Open Faq is Current cell's Faqを設定し、This element is visibleにチェックを入れます。

Group QuestionをクリックしたときのWorkflowを2つ設定する

仕上げといきましょう。Group Questionをクリックしたときのワークフローを2パターン設定します。

<ワークフロー①>

Group Questionをクリックしたときの制限で、Only whenでRepeatingGroup Faq's Open Faq is not Current cell's Faqを設定します。「Open Faq」はカスタムステートです。

  • [ Element ]RepeatingGroup Faq
  • [ Custom state ]Open Faq
  • [ Value ]Current cell's Faq

次に、Element actionsのSet stateを選択して上記のように設定します。

<ワークフロー②>

2個目も設定します。Group Questionをクリックしたときの制限で、Only whenでRepeatingGroup Faq's Open Faq is Current cell's Faqを設定します。

  • [ Element ]RepeatingGroup Faq
  • [ Custom state ]Open Faq

Element actionsのSet stateを選択して上記のように設定して完成です。お疲れ様でした!

アコーディオンメニューを使えればBubbleでのデザインの幅が少し広がると思うのでぜひやったこと無い方は試してみてほしいです!

日本最大級のノーコード開発実績!ノーコードなら迷わずEPICs

EPICsはノーコードでの開発に特化をしたプロの開発組織です。

従来のスクラッチでの開発でよく発生する「費用が高い」 「開発期間が長い」 「知識がなく開発に踏み切れない」という課題に対し、ノーコードでの開発という選択肢で皆様の開発を支援します!

そんな弊社に開発相談をいただくメリットは大きく4つあります!

①豊富な開発実績
創業よりノーコード開発を軸に多様な開発を行ってまいりました。SNSやマッチングアプリ、ECアプリなど多様な開発実績がございます。
豊富な経験をもとに、ただ開発を行うにとどまらず、より良い開発を行うためのアドレスや公開後のご不安やご相談にも対応させていただきます!

②最安30万円!通常の1/10~1/5ほどの低コストで開発
コーディングの工程を削減できるノーコードは、最適かつ最小限の人員で対応が可能です。また弊社では豊富な開発実績があるため、経験を活かした開発を行うことで開発費用を大幅に削減することができます。

③最短2週間!圧倒的な短期間で納品
ノーコード開発では複雑なコードを1から書く必要がないため開発工程を省略することができ、開発期間の大幅な短縮が可能です。

④公開後の保守や運用の徹底サポート
アプリは開発後の運用もとても重要です。EPICsでは開発のみならずその後のサポートも対応可能です!
またノーコードで開発したアプリは、スクラッチで開発したアプリに比べて保守や運用にかかる費用を削減することも可能です!

「勉強になった!」「役に立った!」と思っていただけたら、是非シェアもお願いします!
目次