Skip to content
Submitted 18 days ago

Flexbox Responsive FAQ Accordion

Alonso Vazquez•170
@alonsovzqz
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I think one of the things I feel most proud of is basically being able to build something like this in almost no time. I think that I'm starting to improve my coding skills.

What challenges did you encounter, and how did you overcome them?

One of the challenges definitely was to think about a semactic element in HTML5 that helps me to accomplish this challenge a bit faster. After I found the one I just needed small tweaks to make it look like the designs and the best of all, with almost no JS at all!

Community feedback

  • KapteynUniverse•2,170
    @KapteynUniversePosted 18 days ago

    Hey Alonso, nice job.

    I see your JS code is for the icons, except the aria. You can add icons with CSS and reduce the JS more if you want.

    details[open] > summary::after {
  content: url(./assets/images/icon-minus.svg);
}

summary::after {
  display: inline-block;
  content: url(./assets/images/icon-plus.svg);
}
    1
    Alonso Vazquez•170
    @alonsovzqzPosted 18 days ago

    @KapteynUniverse Awesome! I really liked it! I don't know why I didn't do this in the beginning, thanks a lot, man, really appreciate it.

    1

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