+/- Collapsible/Accordion Component - made possible via switch component with CSS

[MikkoJervoso]

I know this has been requested before but did not get any votes so I wanted to share again. Really useful for long forms or for hiding/displaying lots of information in screens. From a design perspective, this makes more sense than using a switch component or a button.

With the help of many different threads here, I have managed to change the appearance of the switch/toggle component with CSS to display (+) or (-).

From there I have the switch component mapped to a boolean column and the components ‘enclosed’ becomes visible when set to true.

Would love to see this supported natively to avoid having to use CSS.

Thanks Glide and everyone in this community!

[Wiz.Wazeer]

Hello sir,

Not really sure but You can do this without CSS. Please check out lawyersnearme.glideapp.io.

You just need the +/- to create the accordion effect on a single row inline list. It’s native unless you require something more specific.

[Wiz.Wazeer]

Collapsible accordion

I have done one for you on tab 3

[MikkoJervoso]

This is great! Thanks so much @Wiz.Wazeer. I got confused on how the title and emoji ended up in the same line but realized you were using the avatar text as the title. I was thinking the title is actually in the title which results in the emoji displaying on a separate line. Wish I’ve thought of this sooner

This works perfect for my use case. Kinda wish the text can be larger.

Thanks again!

[Wiz.Wazeer]

“Kinda wish the text can be larger.”

Agree! Thank you!

[Itiah_Thomas]

@Wiz.Wazeer

flying-can-2202.glideapp.io

Are you about to make flying-can-2202.glideapp.io tab 3 or http://lawyersnearme.glideapp.io/ available again so I can see what you’ve done? When I click on it I get a “not found” page.

[Darren_Murphy]

This sort of thing can be done without CSS, by using a combination of actions, component visibility and data editor logic. See example below:

CSS Trick: Inset Switch Components for Grouping

I did play around with multiple switches on a line, but the problem is that I have a variable number of switches per group. Some have 3, and some have 4. And in the future some may even have 5 or 6. That would have been a nightmare to maintain, so in the end I decided to keep it simple and implement it accordion-style

The example shown in the link above does use some CSS, but that’s only to inset the switch components. The functionality itself doesn’t require any CSS.