Build Smart Single & Multi Select Accordion Lists in Bubble

Collapse All/ Expand All Action Implementation

We know how to make an accordion, Hanan, thank you 🙄

I know, I swear 😅 But this post takes the accordion list a little further and shows you how to make the accordion smarter by:

1. Making single-select accordions collapse all options but the selected one every time a user expands an option.
2. Adding a simple expand all / collapse all action for multi-select accordions.
3. Breathing life into your accordion lists and making them more responsive to user actions.

Collapse All But Selected in Single Select Accordion Lists

You don’t have to re-click on an option to collapse it in a single select accordion; clicking another option should collapse all but the current active accordion. Here’s how:

1. Repeating Group Setup

Add a custom state that saves the current option to the repeating group. In my case, the RG is a list of FAQs, and therefore the custom state is a single FAQ:

I’m using an option set, not a regular datatype for FAQs. But it works the same.

As you can see, no question is expanded by default, so the custom state is empty on screen load until a question is expanded.

2. Item setup

you know this part but in case someone is new to Bubble:

• Make the answer (accordion content) not visible on page load, check collapse when hidden.

item setup

• add a condition to the icon to change when the item is expanded:

3. Workflows

when the user clicks anywhere inside the list item, we need to:

1. if this item is collapsed: set the active item state of RG to this item .
2. if this item is expanded: clear the active item state of the RG. This will collapse all items.

when the item is collapsed

when the item is expanded

in action:

Collapse All / Expand All in Multi-Select Accordion Lists

The idea here is that we want to make the list remember which items are expanded and whenever the user decides to collapse all or expand all, that is possible with a single click.

Repeating Group Setup

• Just like in single select accordions, we need to add a FAQs custom state to the RG, but this one should be a list to keep track of all open items at any point in time.
• add two links or buttons for the collapse all / expand all actions.

expand/collapse all buttons

Item Setup

• item content should be invisible on page load, collapse when hidden.
• add condition to show the content when the RG custom list contains current cell’s item.
• Also add a condition to change the icon when the RG custom list contains current cell’s item.

Show content when item is expanded

Workflows

Now, when an item is clicked:

1. When the item is not expanded; add it to the RG’s existing list of expanded items.

set state > RG Name > State Name: plus item:Current cell’s item

Expand an item in a multi-select accordion list

2. When the item is expanded; remove it from the RG’s existing list of expanded items.

set state > RG Name > State Name: minus item:Current cell’s item

Collapse an item in a multi-select accordion list

3. When the expand all button is clicked: set the list custom state to contain the full list of possible items.

Expand all action setup

4. When the collapse all button is clicked: clear the list of selected items.

collapse all action setup

Breathing Life into the UI

simple things like changing the styles of elements on hover and click can go a long way in improving the overall experience:

1. Use a different style for a selected item: having a different BG color for the selected item can really help users focus their attention while consuming content.
2. Making the list item respond to hover by a small but preceptive style change is also important, it tells users that this item is interactive.
3. using different color for links to highlight an action is also a small but important change that largely helps users quickly find and recognize actions.

element response to user action

That is all! I hope you found this helpful in any way, I did see questions about this topic in the Bubble forums so I thought I might help :)

‘Till next time! Lots of love and #keepdesigning!

Mwah!