# Accordion Custom Component **URL:** \ **Category:** Elements API\ **Created:** [February 1, 2025, 11:59am UTC](https://forums.realmacsoftware.com/t/accordion-custom-component/46131 "2025-02-01T11:59:36Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [February 1, 2025, 11:59am UTC](https://forums.realmacsoftware.com/t/accordion-custom-component/46131/1 "2025-02-01T11:59:36Z")
We’re going to build an official Accordion component that ships in Elements… but, I was just playing around with a custom component this morning and thought I’d share it here to get some conversation going around what people actually want/need from such a component. I think something like the above with a few more styling controls would be all that’s required for an Accordion, right? Let me know. ---
**Author:** ![Bartje](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bartje/32/1210_2.png) [@Bartje](https://forums.realmacsoftware.com/u/Bartje)\ **Post date:** [February 1, 2025, 12:37pm UTC](https://forums.realmacsoftware.com/t/accordion-custom-component/46131/2 "2025-02-01T12:37:03Z")
I made one for myself and these are my Properties ![Arrow](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/2/4/2407c1daa49fdf35ec3bcee3631e3a84610eaf0e.png) ![Content](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/3/7/37648b1c192bc2a23fbed7bd68b7b7e69f9d3d50.png) ![header box](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/f/c/fcc222983671b5108d4e321487ad0039842cd5ad.png) ![Header text](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/b/b/bbb595df5b38561dcca3658dc11865b483c16185.png) ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [February 1, 2025, 12:51pm UTC](https://forums.realmacsoftware.com/t/accordion-custom-component/46131/3 "2025-02-01T12:51:41Z")
That’s great, looks like you added ALL the options! Is there anything you think the built-in one should do that yours doesn’t? ---
**Author:** ![Bartje](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bartje/32/1210_2.png) [@Bartje](https://forums.realmacsoftware.com/u/Bartje)\ **Post date:** [February 1, 2025, 3:00pm UTC](https://forums.realmacsoftware.com/t/accordion-custom-component/46131/4 "2025-02-01T15:00:42Z")
I think they’re quite similar. I’ve only set up the header and the content section as separate elements so that additional styling can be applied (in this example, the content section is smaller, creating an extra effect). ![Scherm­afbeelding 2025-02-02 om 16.00.18](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/3/c/3c109c6d080d4d3efee91cfa25d842b34f31112e.png) ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [February 1, 2025, 4:55pm UTC](https://forums.realmacsoftware.com/t/accordion-custom-component/46131/5 "2025-02-01T16:55:05Z")
still need some work, need to adjust text on mobile screen to show below header rather than all the headers ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [February 1, 2025, 6:50pm UTC](https://forums.realmacsoftware.com/t/accordion-custom-component/46131/6 "2025-02-01T18:50:20Z")
This would provide basic support for an accordion and much appreciated. The one feature I did not see that I think is essential for something like this, is support for there only being one item expanded at a time. If there is one open and you open another it closes the original that was open. This is a common feature in this type of component and something I rely on all the time. It might have been present in your example but I did not see it. ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [February 1, 2025, 7:47pm UTC](https://forums.realmacsoftware.com/t/accordion-custom-component/46131/7 "2025-02-01T19:47:27Z")
Elements and 5 mins you add dropzones and almost drop anything in ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [February 1, 2025, 8:06pm UTC](https://forums.realmacsoftware.com/t/accordion-custom-component/46131/8 "2025-02-01T20:06:19Z")
That’s great, and I really do find building custom components to be quite addictive! ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [February 1, 2025, 8:12pm UTC](https://forums.realmacsoftware.com/t/accordion-custom-component/46131/9 "2025-02-01T20:12:02Z")
I build a different component every day ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [February 1, 2025, 9:02pm UTC](https://forums.realmacsoftware.com/t/accordion-custom-component/46131/10 "2025-02-01T21:02:44Z")
Now that’s ~~addiction~~ dedication 🙌 ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [February 2, 2025, 3:41pm UTC](https://forums.realmacsoftware.com/t/accordion-custom-component/46131/11 "2025-02-02T15:41:49Z")
going back over 3d, few more tweaks ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [February 2, 2025, 3:43pm UTC](https://forums.realmacsoftware.com/t/accordion-custom-component/46131/12 "2025-02-02T15:43:07Z")
That’s a very nice card flip effect, good work 🙌