How To Collapse space between elements

I am trying to build an FAQs section for a website. as you can see in the image each there is space between each bar. Each bar has a toggle workflow so when the bar is clicked a GroupFocus element appears below the bar with the answer to the question. When you click the bar again the GroupFocus dissapears again.

How can i make a collapsible space between each question so that when I use the toggle action the bars below it move down and back up to the original spacing?

I have watched videos on this but those are all from multiple years ago. It seems that this used to be easy to do in Bubble but now it isn’t anymore.

Does anyone know what I can do to fix this?
Do I need a plugin for this?

Any advice is very welcome!


Collapse when hidden is your key.

Could you expand on this a bit? I have seen this checkbox before but now I can’t seem to find it in either the group element or the groupfocus element. Where do I find this checkbox?

You can find it in layout when this is checked and the element is hidden the element then shall collapse

You dont need a plugin. Play with the conditions section of your bars and combine it with margins.
when “group focus A is visible”
bottom margin = “–px”

when “group focus A is not visible”
bottom margin =“0 px”

group focus is a floating element. it wont work with “collapse when hidden”.

Hello, I would like to suggest a different approach. It may seem a lot of work, but hey, it’s a nice exercise!

Instead of using a gf, you can use a second group, let’s call them group_question and group_answer. A detail: i’m assuming your three group_question’s are within a group that has the gap spacing box checked with the spacing you want.

  1. Group group_question and group_answer on a column group. Define a gap in case you need any between the group_question and group_answer.
  2. Uncheck group_answers “this element is visible on page load” and check “collapse when hidden”.
  3. Create a custom state on group_answer. Let’s call this custom state “visible”, the type is yes/no. Defauld value is ‘no’.
  4. Create a condition on group_answer that says “when group_answer visible is yes” this element is visible.
  5. Create two workflows for when “group_question” is clicked. One happens ‘only when’ group_answer visible is no and its action is set a state of an element (element: group_answer; state: visible; value: yes). The second happens 'only when group_answer visible is yes, the action is the same as the first one but the value is no.

Now it’s all set! If you use ‘copy special - copy with workflows’ and paste with workflows, you can change only the texts (and nomenclature, very important).

The downside: to hide group_answer the user would have to click on group_question again. Clicking outside it wouldn’t close it.

Here are some images and a 20sec video of a quick simulation I did:


Quick video

Wish you the best on your application!