# Design Challenge **URL:** \ **Category:** Elements\ **Created:** [May 24, 2025, 6:35pm UTC](https://forums.realmacsoftware.com/t/design-challenge/47734 "2025-05-24T18:35:12Z")\ **Posts on this page:** 15\ **Page:** 1
**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:** [May 24, 2025, 6:35pm UTC](https://forums.realmacsoftware.com/t/design-challenge/47734/1 "2025-05-24T18:35:12Z")
@dan I have some cards that are placed in a three-column grid, These cards utilize accordions to expand and reveal details about the topic. The cards look as follows when collapsed. The cards all have their heights set to AUTO. ![CleanShot 2025-05-24 at 08.24.37@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/4/3/43d820099108d3d1e2fdd79cff83b09c5acf0558.jpeg) If I now expand one of these cards I get the following, which is as I would expect. ![CleanShot 2025-05-24 at 08.25.02@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/3/1/31a9baa5954e280c519aaeedf6f84300ecc83a57.jpeg) Now if I expand all of the cards, because they have differing amounts of content the overall heights of the cards are unequal. So my question is how do I get the height to all match the height of the longest card. ![CleanShot 2025-05-24 at 08.25.27@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/e/b/eb911084bce41fcc6de9b3804ab378bb3d2ffa76.jpeg) Typically, I would do this by setting the height of the cards to FULL, but then when only one of the cards is expanded all of the others appear as following, which looks horrible. ![CleanShot 2025-05-24 at 08.26.32@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/7/6/768a5efdfcd0cfbd7c4235f59ec6701229356215.jpeg) So my challenge is how can I get the cards to match the height of the longest currently open card, leaving all of the unopened ones at the collapsed height. ---
**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:** [May 24, 2025, 6:39pm UTC](https://forums.realmacsoftware.com/t/design-challenge/47734/2 "2025-05-24T18:39:03Z")
Can you share a project with just these in a page? That way I can have a play and see if I (or @ben) can come up with the answer 🥰 Or maybe someone else here on the forum will beat me to it… ---
**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:** [May 24, 2025, 6:40pm UTC](https://forums.realmacsoftware.com/t/design-challenge/47734/3 "2025-05-24T18:40:28Z")
I’ll try and move this out of this project into a much simpler one, stay tuned. ---
**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:** [May 24, 2025, 6:45pm UTC](https://forums.realmacsoftware.com/t/design-challenge/47734/4 "2025-05-24T18:45:41Z")
> [@dan](#): > > Can you share a project with just these in a page? That way I can have a play and see if I (or @ben) can come up with the answer 🥰 @dan Here is the project in [Elements](https://elementsapp.io/) Cloud, I left all the content that I had been using to make it more realistic. [Card-Test Project](elementsapp://downloadDocument/LoDNEtUKPFsJ) Update: I have a somewhat related question. In one of the cards there is an image at the bottom of the card. Because these cards are globals and not all of the cards use this bottom image I would like to be able to hide it unless needed. But the problem is the HIDDEN settings is not one that can be overriden in a global, it can only be overridden for different breakpoints, why? ---
**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:** [May 25, 2025, 1:42pm UTC](https://forums.realmacsoftware.com/t/design-challenge/47734/5 "2025-05-25T13:42:49Z")
@handshaper Robin not at my laptop, do you have an outer container for the entire card check that for height, I turn on borders if I cannot see what’s happening, also turn on background colors to assist some times. Guess text does not expand with full from memory. Accordian cannot remember, probably no full (perhaps 100%). Probably a combination of no options or backgrounds available the top of the Accordian Color is same as background as well? You might find it’s all expanded except backgrounds are not correct. Anyway nice puzzle will have a try, just to see what’s going on and learn sometging ---
**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:** [May 25, 2025, 5:39pm UTC](https://forums.realmacsoftware.com/t/design-challenge/47734/6 "2025-05-25T17:39:16Z")
There is a container that the deck is in, which is a grid. You can easily change the background color of the container to see what is going on. Unfortunately, with accordions, if you want a color in the header, you have to set the full background color. One of the flaws I see in that component. You should be able to set a background color for the header independent of the content area, especially if you want to use a hover effect on the header. No, the color of the accordion does not cause it to appear as if it collapsed when it is expanded. ---
**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:** [May 25, 2025, 6:53pm UTC](https://forums.realmacsoftware.com/t/design-challenge/47734/7 "2025-05-25T18:53:00Z")
Had a quick check the main container set that full, then you end up with Color issues between the Accordian text and container, the trigger for the container as you say is fixed to the background when you reveal the background of the Accordian. The backgrounds are an an issue when the the main container is set to full. I have an issue with internet at the moment, otherwise would upload a video. Plus text has no option for full ---
**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:** [May 25, 2025, 7:45pm UTC](https://forums.realmacsoftware.com/t/design-challenge/47734/8 "2025-05-25T19:45:07Z")
ok have a better upload speed now my first look at your issue ---
**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:** [May 25, 2025, 8:11pm UTC](https://forums.realmacsoftware.com/t/design-challenge/47734/9 "2025-05-25T20:11:17Z")
@upssjw Yes, the problem is that there is no option to set text to FULL so that it would expand to accommodate the empty space. ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [May 26, 2025, 7:27am UTC](https://forums.realmacsoftware.com/t/design-challenge/47734/10 "2025-05-26T07:27:26Z")
@handshaper I replied to [your other Accordion thread](https://forums.realmacsoftware.com/t/accordion-design-choices/47755/2), however, just wanted to pop on here and say what you’re trying to achieve isn’t quite do-able with the current options available on the Accordion. It would be doable with a few custom CSS classes (using some advanced Tailwind arbitrary selectors), but as I said in the other thread: I can see the use case for adding styling options to the Accordion Title, so we’ll get that added in the coming weeks 🙂 ---
**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:** [May 26, 2025, 5:08pm UTC](https://forums.realmacsoftware.com/t/design-challenge/47734/11 "2025-05-26T17:08:06Z")
It is a really useful component, I just wanted to maximize its usability for different scenarios. Mahalo for considering these tweaks. ---
**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:** [May 26, 2025, 7:22pm UTC](https://forums.realmacsoftware.com/t/design-challenge/47734/12 "2025-05-26T19:22:18Z")
Just as an update, for the short term my less than idea solution is to group all of the accordions in such away that only ONE can be open at any given time on the whole page. This is less than ideal as it makes things a little more awkward for someone reading the details. For now it seems better than the alternatives. We’ll what happens once there are some changes to accordions. _UPDATE: I should add that I opted for this solution because it was the most optimal one for accessing this information on a phone where you can only see so much at a time and you don’t want to be doom scrolling through tons of data. Once there is a better way to do this on larger screens I will change the accordion grouping accordingly at different breakpoints._ ---
**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:** [June 2, 2025, 12:47am UTC](https://forums.realmacsoftware.com/t/design-challenge/47734/13 "2025-06-02T00:47:31Z")
@dan @ben After much experimenting with different approaches to solving the problem I posted in this design challenge I have arrived at what I consider an acceptable solution. This solution completely abandons the use of accordions as it is just a little unwieldy. It departs from the original idea by using a much cleaner interface for accessing the data in a user-selectable sequence. It leverages modals to achieve this as the reading of the steps involved in this process tends to be modal. I’m very happy with this solution as it looks very clean and it works equally well on any device coupled with the floating Quicklinks bar making it very easy to quickly get to the relevant information. Here is a brief look at how it works. ![CleanShot 2025-06-01 at 14.34.45](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/b/ab86fcab60930330d1097fb3a533ef406ca4a8de.gif) I’m very curious to hear what others think of this idea. ---
**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:** [June 2, 2025, 6:23am UTC](https://forums.realmacsoftware.com/t/design-challenge/47734/14 "2025-06-02T06:23:51Z")
@handshaper Robin that approach works great from my thoughts, focus on the steps is highlighted really well Your site look great, the Quicklinks bar is really cool now The Step 1, Step 2 etc. both in the in Quicklinks and the page are a great touch, like the page colors Cool detail with favicon’s You have quite a few pages now and a lot of information, excellent ---
**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:** [June 2, 2025, 6:44am UTC](https://forums.realmacsoftware.com/t/design-challenge/47734/15 "2025-06-02T06:44:16Z")
Mahalo, for the kind words Steve. I’m starting to feel good about this site as I was a little worried about exposing too much information as there is a lot to explain. Now I’m going to take some of these ideas and apply them to my other sites. [Elements](https://elementsapp.io/) makes doing stuff like this fun. I don’t think I have been this excited about creating websites, ever. It was always a chore building them with Classic/Stacks.