Submitted over 1 year ago

FAQ Accordion

@CloudOfAlemar

A solution to the FAQ accordion challenge

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

Code

Please log in to post a comment

Community feedback

P
Dean•480
@Deanogit
Posted over 1 year 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•430
@EugeniaAntonova
Posted over 1 year 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

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