Forum Academy Marketplace Showcase Pricing Features

Unfold/fold element & responsivness

Hi!

I would like to realize a clickable element that could be “unfold” and “fold” (like on the booking website for example) but I don’t know how to create this with bubble.
I can make a group appear over my text, but I would like to move all the text down if the element is unfold.
Do anyone know if this is possible and how to do it ?

Please see what I want to achieve on this image :

Thank you for your help and your time.
Best Regards,

Hey @lise.nicolas :slight_smile: This can be accomplished by placing the content which ‘unfolds’ inside its own collapsable group (called Inside Group for example). Here is an example:

Editor:

Preview:

To begin, I would have the “Your Budget” Filter be a text element instead of a button, in order to have the caret icon next to the “Your Budget”. Since Bubble supports FontAwesome icons within text elements, you can set the text be:

Which looks like:

You can change the colors of the icon or text using the rich text editor, or by typing in the code/hex number directly in the default text.

Then, there is an “Inside Group” beneath it with the checkboxes/price filters. Double-click on the group to open the property editor, and then make sure “This element is visible on page load” is unchecked and “Collapse this element’s height when hidden” is checked.

This just tells Bubble to collapse the group’s height whenever the Group is not visible. Then you can create a workflow for when the “Your Budget” Text is clicked. The workflow would be “When Your Budget” is clicked --> Element Actions --> Toggle: Inside Group.

Last but not least! The last step is to make sure the caret icon faces down whenever the Inside Group is visible. Here, we just have to add one conditional statement to the “Your Budget text” which is:

*It looks almost the same, but the difference is that when the Inside Group is not visible, the text shows the font awesome icon “caret-right”, and when the Inside Group is visible, the text shows the font awesome icon “caret-down”. :slight_smile:

4 Likes

Perfect it was really helpfull ! Thank you very much !

1 Like