Submitted almost 2 years ago

Faq Accordion Card HTML & CSS Only

David Magalhães• 130

@davidwilliamx

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

FAQ accordion card

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Faq Accordion Card HTML & CSS Only

Hi everyone, this was the most complicated challenge to finish so far, initially I managed to make the accordion menu with JQuery so I had to look for other ways to get it working. I found this new tag called details which is part of the HTML5 and CSS working without needing JavaScript codes.

I had some problems with the positioning of the images, I don't know if the way I did it is correct. I also had problems with the height of the details elements, when all the elements are open showing the responses these elements end up leaking.

Thanks and all feedback is appreciated.

Community feedback

Please log in to post a comment

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