Skip to content
Submitted over 3 years ago

Responsive FAQ Accordion Using HTML, CSS (no JavaScript)

shiva santosh jana•375
@santu369
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion card
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

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.

Community feedback

  • Akshay Meshram•390
    @akshay63Posted over 3 years ago

    Hey! shiva santosh jana. I liked your solution to this challenge. Keep coding! 🎉

    0
    shiva santosh jana•375
    @santu369Posted over 3 years ago

    Thank you Akash, will keep coding.

    0

Please log in to post a comment

Log in with GitHub

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