Submitted 9 months ago

FAQ Accordion

CloudOfAlemar• 200

@CloudOfAlemar

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

This is a solution for...

FAQ accordion

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello everyone, I just completed the FAQ Accordion Frontend Mentor Challenge. It was fun building this component. I really enjoyed using Javascript to dynamically set the max-height of the li elements to hide its content. I really took my time to make sure that some small functionality details were handled as best as possible, which made me use the ResizeObserver API to fix some issues when the screen was being resized. I had lots of fun building this component overall, please let me know if there is anything I can improve on, thank you! :D P.S - I didn't use the design files for this project :p

Community feedback

Dean• 480

@Deanogit

Posted 9 months ago

Wow! @CloudOfAlemar! This is impressive!

I've been wondering for a while now how its possible to get these cool on loading animations!

I've noticed at the bottom of your CSS file you're using

@keyframes introFaqCard {
  0% {
    opacity: 0;
    transform: translateY( 20% );
  }
  100% {
    opacity: 1;
    transform: translateY( 0% );
  }

This really looks great!! What an inspiring solution, I'll dig into the JS more when I have more time, I'd also like to implement the accessibility features in the brief.

Amazing work!

Eugenia Antonova• 400

@EugeniaAntonova

Posted 9 months ago

Hello! I really like your solution and as i am a newbie, i have more of a question, than advise: why did you decide to put background images directly into the murkup and not to use background-image? I read it is better practice

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