Responsive accordion card with pure CSS

Community feedback

• Account deleted

  The only thing that I believe ruins the experience is the height that changes as you open the accordion items. This is a little hard to do without JS. One idea that came to my mind is to set a hard coded height with px or a min-height at least to let the height change only after the first or second item is open.

  I believe that by specifying a height to the card and by writing a little JS to allow only 1 item at a time to be open this will be much much better experience.

  Actually I'm thinking if it's possible to do this with only CSS... I guess you can do it by using checkboxes for the items that open and close in the accordion. This way everytime a checkbox is checked ( accordion item is open ) you take all the other sibling items and you close them. I'm pretty sure someone must've done this if you search about it.

  For accessibility now, check this: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/

  Generally it's good to make sure we are following good accessibility practices when we are creating these kind of components. You can find more here: https://www.w3.org/WAI/ARIA/apg/patterns/.

  Also for future references if you are creating components like toasts, carousel, side navs, dialogs etc, you can use these references or take some ideas: https://web.dev/patterns/components/ And for more references, examples and tips on patterns: https://web.dev/patterns/

  I got a little out of topic with the recommendations but I just wanted to share them. For some reason I just started using them only recently and they are helping immensely.

  Marked as helpful

  1

  ---

  

  Roksolana•910

  @RoksolanaVeresPosted over 1 year ago

  Hi, @arkatsy . Thanks for your feedback! I also had concerns about the background image that changes its height but didn't know how to make it look better. I've tried to set the fixed height but with it when we open all the accordion items it looks even worse than when the background image just stretches.

  The idea with checkboxes sounds interesting. I'll try to do as you suggest and let you know later whether it helped.

  Also thanks for the useful references🙂

  1

  

  Roksolana•910

  @RoksolanaVeresPosted over 1 year ago

  Hi, @arkatsy. I've improved the solution based on your recommendations and now it looks really better. Thank you for your time and help!

  P.S. I used radio buttons, not checkboxes for the accordion, but I guess it was exactly what you meant

  1

  Account deleted

  @RoksolanaVeres It's definitely better. The reason I recommended checkboxes rather than radio buttons is because radio buttons can't be unchecked. Basically you are stuck with one item always open unable to close.

  I took a look at your code to see where this small layout shift is coming from when you open the accordion item but couldn't find it :(

  Anyway I got a little interested in this accordion challenge so I'll attempt to do it myself similarly with only CSS. If interested keep an eye on my profile, I'll try to come up with a solution until tomorrow hopefully

  1

  

  Roksolana•910

  @RoksolanaVeresPosted over 1 year ago

  @arkatsy I've just found the problem which caused that shift and fixed it.

  Sure, I'm waiting forward to your solution! I tried to do it with checkboxes but gave up after I couldn't make only one particular checkbox stay checked. I mean, the idea is that whenever you check one particular item, all the other items should be automatically unchecked. With checkboxes you can check several items and radio buttons allow only one item at a time to be checked, so I decided that maybe you actually meant a radio button instead of a checkbox. Anyway, now I'm even more intrigued to see your solution :)

  1

  Account deleted

  @RoksolanaVeres Okay I spent a good amount of hours trying to do the accordion as I was saying but I think I came to the conclusion that that's not possible

  I'd like to share details and all my findings but the markdown here is awful for large explanations and conversations that include code examples

  If you have discord, I'm with the same username there arkatsy, feel free to add me and continue the conversation there

  Also after this defeat I wasn't sure I wanted to continue the challenge but most likely I'll just use some js to get it done and finish it a bit later.

  1