Submitted about 4 years ago

Responsive FAQ Accordion Using HTML, CSS (no JavaScript)

@santu369

A solution to the FAQ accordion card challenge

Solution retrospective

Developed accordion card component using JavaScript. Went on to complete the Bonus and removed JavaScript, updated CSS to toggle the answers. In JavaScript version, I was able to hide all other answers and only show the answer that the user clicks on using small logic. But in CSS version, I was not able to hide other answers. Let me know if this is possible without using JavaScript.

Edit Used radio instead of checkbox to achieve hide other answers apart from user selected one. It can also be done using CSS :target selector

JavaScript Version

Comments are much appreciated.

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on shiva santosh jana's solution.

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