FAQ Accordion

Hi Marian ,

Excellent work. One requirement is missing. If you check the readme file again, you will see this requirement :

• Navigate the questions and hide/show answers using keyboard navigation alone

You have used non interactive element (div tag) which users can't navigate through a keyboard. The functionality can be achieved using the details tag.

You forgot to apply the active state element when hovering over the question.

In addition, the question is not aligned in the middle between the two lines.

Also, avoid using figure tag for logos as it's not the best or right option. Unless you have figure caption to be combined with the photo, don't use a figure and use img tag or inline svg directly.

Best of luck

Hello there 👋. Good job on completing the challenge!

I have some suggestions about your code that might interest you.

For the wrapper-question element:

• Set a padding for this element to give it some room to breathe, this will allow you to remove the padding from the .answer element
• If the answer element is not visible you should hide it with a display: none (or add the hidden attribute to the element) instead of a height: 0, the reason for this is that although the elements height is 0, its padding/margin still count in the layout. You could play with classes and the click plus animationend events if you want an animation (of course CSS included).

For the .question element.

• You could use the svg markup instead of importing it as a content in the ::after of the .question
• The .question element could be a flex container with a justify-content: space-between to separate the title from the icon.

I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

Happy coding!

You can implement this by native HTML element pair: detail and summary