# +/- Collapsible/Accordion Component - made possible via switch component with CSS **URL:** \ **Category:** Feature Requests\ **Created:** [May 20, 2021, 12:16am UTC](https://community.glideapps.com/t/collapsible-accordion-component-made-possible-via-switch-component-with-css/27000 "2021-05-20T00:16:28Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![MikkoJervoso](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mikkojervoso/32/7832_2.png) [@MikkoJervoso](https://community.glideapps.com/u/MikkoJervoso)\ **Post date:** [May 20, 2021, 12:16am UTC](https://community.glideapps.com/t/collapsible-accordion-component-made-possible-via-switch-component-with-css/27000/1 "2021-05-20T00:16:28Z")
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. ![switchcss](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/5/15d858438bf3211d20c25afe17df11257e118fc0.gif) Would love to see this supported natively to avoid having to use CSS. Thanks Glide and everyone in this community! ---
**Author:** ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)\ **Post date:** [May 20, 2021, 1:20am UTC](https://community.glideapps.com/t/collapsible-accordion-component-made-possible-via-switch-component-with-css/27000/2 "2021-05-20T01:20:53Z")
Hello sir, Not really sure but You can do this without CSS. Please check out [lawyersnearme.glideapp.io](http://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. ---
**Author:** ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)\ **Post date:** [May 20, 2021, 1:56am UTC](https://community.glideapps.com/t/collapsible-accordion-component-made-possible-via-switch-component-with-css/27000/3 "2021-05-20T01:56:42Z")
> **[Collapsible accordion](https://flying-can-2202.glideapp.io/)** I have done one for you on tab 3 ---
**Author:** ![MikkoJervoso](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mikkojervoso/32/7832_2.png) [@MikkoJervoso](https://community.glideapps.com/u/MikkoJervoso)\ **Post date:** [May 20, 2021, 2:20am UTC](https://community.glideapps.com/t/collapsible-accordion-component-made-possible-via-switch-component-with-css/27000/4 "2021-05-20T02:20:53Z")
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! ---
**Author:** ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)\ **Post date:** [May 20, 2021, 2:24am UTC](https://community.glideapps.com/t/collapsible-accordion-component-made-possible-via-switch-component-with-css/27000/5 "2021-05-20T02:24:08Z")
“Kinda wish the text can be larger.” Agree! Thank you! ---
**Author:** ![Itiah\_Thomas](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/itiah_thomas/32/50582_2.png) [@Itiah\_Thomas](https://community.glideapps.com/u/Itiah_Thomas)\ **Post date:** [February 25, 2023, 5:15am UTC](https://community.glideapps.com/t/collapsible-accordion-component-made-possible-via-switch-component-with-css/27000/6 "2023-02-25T05:15:33Z")
> [@Wiz.Wazeer](#): > > [flying-can-2202.glideapp.io](http://flying-can-2202.glideapp.io) Are you about to make [flying-can-2202.glideapp.io](http://flying-can-2202.glideapp.io) tab 3 or [http://lawyersnearme.glideapp.io/](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. ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [February 25, 2023, 5:50am UTC](https://community.glideapps.com/t/collapsible-accordion-component-made-possible-via-switch-component-with-css/27000/7 "2023-02-25T05:50:35Z")
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](https://community.glideapps.com/t/css-trick-inset-switch-components-for-grouping/35134/18): > > 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 slight_smile 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.