Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

FAQ accordion card using only CSS and HTML

Nuh 35

@Nuh-h

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback appreciated. Thanks

Community feedback

Marta 630

@martam90

Posted

Hi, your solution looks nice. I would suggest two things:

  • Add line-height to .answer, so the text will looks a little bit nicer,
  • You can try to hide the content of .answer by clicking on arrow up again. If you know JavaScript a bit, that might helps a lot but I think it is possible to make it in HTML/CSS as well.
0

Nuh 35

@Nuh-h

Posted

@martam90 I appreciate the feedback, thank you very much. I do know JS but trying to avoid it was also part of the challenge. I can't claim to know how it is done with pure CSS, but maybe there's trick with HTML to do it. I will try it sometime.

0
Abhik 4,840

@abhik-b

Posted

Hi Nuh, your solution is amazing. I liked the transition when a accordion opens, Its very reponsive . Good job 👌 Keep it up 💯

0

Nuh 35

@Nuh-h

Posted

@abhik-b thank you! it was thanks to this challenge that I learnt that neat trick with CSS.

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord