FAQ accordion card with React and Styled components

Community feedback

• 

  Wendy•2,150

  @wendyhamel

  Posted over 1 year ago

  Hi Marina, Good job taking on this challange! You are right, making this one responsive is complicated.

  The smooth transitions for the answers is a problem. You can't transition dynamic height (height:auto), it needs absolute values. You can tinker around with it, but I often end up with it still beeing a bit janky. The position: static is the default position for all elements, if you don't specify a position yourself. To make this work in this challange you will need to work with position:relative and position: absolute. The element (a div for example) containing the image should have position:relative for the image with position:absolute to work. In this challange you will need two different locations for the two different images to show properly on different screen sizes.

  If you like to improve some more, you could work on the accessibility. If you use more semantic HTML elements, your solutions will be better accessible for screen readers and by keyboard. A <ul> with <li> items for example to show the questions and you could use the <details> element for the separate questions.

  Good places to learn:

  mozilla

  • about position
  • about transition
  • about accessibility
  • about the details element

  css tricks

  • about transitions with auto dimensions

  I do not want to reveal too much about how you could do this, it helps to figure out your own approach. But if you get stuck, Keep asking questions and don't give up!

  01