Hey @lise.nicolas This can be accomplished by placing the content which ‘unfolds’ inside its own collapsable group (called Inside Group for example). Here is an example:
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”.