Aligning 2 groups horizontally?

I’ve built a “collapsible” menu using a group, organised by columns. It’s essentially an FAQ where you can click on a question to expand or collapse the answer.

What I want to achieve is to add an icon or image on the left side of each question, to indicate that the question is expandable or collapsable (depending on its state). The difficulty is:

A. the icon should change depending on whether the question is expanded or not.
B. The icon move (or pushed down) with the question when it moves.

What I’ve tried so far:

Putting the column group in a row group and and add another one. It messed the layout up (or I may have not done it correctly)

I’m sure it’s a simple thing to do, but if you’ve done it before, I would appreciate if you could tell me what you’ve done :slight_smile:

Could you share some screenshots of what you’re working with?

It seems relatively straightforward, there are a few ways to do it.

You could create a state on a relevant element, and toggle it to yes or no. Add some conditionals on your icon so when state = yes, show icon a - when state = no, show icon b. If you also want to show a group only when it is toggled yes, you can add a conditional such as “when state = yes, this element is visible = ticked”. Don’t forget to tick the “collapse height when hidden” box to ensure the hidden element doesn’t leave a large gap :slight_smile:

If that doesn’t help, share some screenshots of your editor and we can point you in the right direction.

This topic was automatically closed after 70 days. New replies are no longer allowed.