@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.
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.
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.
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.
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?
@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
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.
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
@handshaper I replied to your other Accordion thread, 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
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.
@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.
I’m very curious to hear what others think of this idea.
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 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.
