Accordion menus are everywhere in the internet.
Most of the time, you'll see them for FAQ (Frequently Asked Questions) sections because they are a great way to display questions and answers in a clear and interactive way.
And Bubble is no exception to this.
In this article, you are going to learn how to create an FAQ section with an accordion menu in Bubble like the one below :
So let's get started !
Step 1 - Building our FAQ Section in Bubble
Of course, the first step of our tutorial will be to build our interface.
To save time, I'm going to use a pre-built FAQ Section from Nocodable Component's library.
Now that we've got the base, let's take a look at how it is structured.
As you can see in the screenshot below, the FAQ Section is built within a Repeating Group.
Why ? Because it will enable you to manage you FAQ content (i.e your Questions and Answers) directly within your Database. Either with a dedicated Data Type or an with Option Set.
Into this Repeating Group, you can see the "Group Question + Answer", which is the group that contains both my question and my answer. Its Layout Type is set to Column, so that my groups question and answer are stacked vertically on top of each other.
Finally, we have two groups. One for the Question and one for the Answer.
And there you go, you have the basic structure for your FAQ Section !
Step 2 - Configuring our Database
Now that we have the structure of our FAQ Section, we can start creating the Data that we are going to inject into our FAQ.
In this example, I'm going to use a Data Type, but you can also create an Option Set if you prefer this method. It'll work the same way.
A - Creating our Data Type
First thing first, let's create our FAQ Data Type into our database.
This data type will be what we'll display into our Repeating Group.
Into this Data Type, create two data fields :
One for the question, and one for the Answer.
B - Populating our FAQ Database
Now that we have our database setup, we need to create some actual questions.
So go into your Database and into "App Data", and create a new FAQ record :
There you go, now you can create as many as you want !
Step 3 - Displaying Questions and Answers into our Accordion FAQ
Alright, now that we've got our UI and our Database setup, we can start linking our Front-End (i.e the interface) to our Back-End (i.e our database).
First thing first, we need to set the Type of Content of our Repeating Group, so that Bubble knows what we are actually displaying.
In our case, this is the FAQ Data Type we created earlier.
On top of that, we need retrieve the right data. To do this, we'll use a "Do a search for" operator, and select our FAQ Data Type.
Alright, now that we are search for the right data, we need to make it go through our text elements !
The tricky thing to keep in mind is that the Data must pass from our Repeating Group, through each groups all the way to our Text Elements.
So you need to setup every groups all the way down to the Text elements, as below :
Now that our Data is communicating from our Repeating Group all the way down to our Text Elements, we can use it to populate our Text Elements, like below :
Alright, now our Data is being displayed correctly within our FAQ Section !
However, we need to do one more thing before moving to the next step, which is to hide by default our Group Answer (so that we'll be able to make it appear with a click later on).
To do this, simply select your "Group Answer" and :
- Uncheck the box "This element is visible on Page load"
- Check the box "Collapse when Hidden"
- Check the box "Animate the collapse operation"
With this setup, the Answer will be hidden by default, won't take any space when hidden and will have a nice animation when appearing !
Step 4 - Making our Accordion Menu work on click
Now comes the last step, which is to make our Accordion Menu actually work when the user clicks on it.
To do this, we'll simply add a workflow on our "Group Question + Answer". Why on this group ?
Because it creates a bigger click zone to show or hide the Answer, which is more user friendly.
To make it work, we'll use the "Toggle and element" action.
Why this action ?
Because thanks to this, the Group Answer will show on click when hidden, and hide when it is already visible. Easy as that !
And there you go ! You can now preview your newly build Accordion FAQ Section and it should work like a charm 😎
