Responsive Accordion card with CSS Grid and Transforms

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Hi,

  On mobile the text is too small for me to read.

  I like the idea of adding transitions, but think it looks a bit janky because one closes and disappears immediately (making everything jump) before the new faq opens. I would delay closing the previous faq until the new one is open maybe (?) or try to make them both happen smoother.

  Really, collapsible sections should always be able to have multiple open at once. That's a bit tricky with the desktop design though because of its limited height - it would mean a scrollbar inside the component, which you may not want.

  2

  ---

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Looking at html, most important thing you need to address with this is making the html accessible.

  Look up how to build accessible collapsible sections. Heydon Pickering's inclusive components website has a good article on this.

  To summarize you need to

  • always use interactive elements for interactive behaviour
  • remove alt values on meaningless images like the down arrows (I would probably have them as background images tbh)

  1