Skip to content
Submitted about 2 years ago

FAQ Accordion Card using CSS Flexbox

Ayoife•300
@Ayoife
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

This challenge went well. I learnt to stop using divs for everything in my html as advised by @Lucas and the other Frontend Mentors and I also learnt some CSS tricks as well. But there's one thing I didn't do.....The README.md file in the project folder stated (as a BONUS) to complete the challenge without JavaScript and I didn't know how to ensure that only one question remains open in the card without it, so if you do know how to do it without JavaScript, please leave it in your feedback. Thanks for viewing my solution and have a wonderful day! :)

Community feedback

  • Denis•1,060
    @Mod8124Posted about 2 years ago

    Hello well done!

    Without js you can use details here you can see the documentation

    And change the icon(example)

    details > summary {
    list-style-type: '▶️';
}

details[open] > summary {
    list-style-type: '🔽';
}

    and that's all i hope it helps u 👌

    1
    Ayoife•300
    @AyoifePosted about 2 years ago

    @Mod8124 Yeah, I did that in my code, but my question was, how to ensure that only one question (FAQ) was open while the rest were closed without using JavaScript. But anyways thanks for viewing my site and leaving a feedback.

    0
    Denis•1,060
    @Mod8124Posted about 2 years ago

    @Ayoife ahhh, sorry then idk XD, you can do that with scss functions but vanilla css idk xD

    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