Submitted 9 months ago

Repsonsive FAQ Accordion [Vanilla CSS and JS] 🤩

Levin Bänninger• 40

@levinbaenninger

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

Hi there,

In this project I have learned a lot, as I'm rather new to JavaScript. In this project I learned a ton about selectors in JavaScript such as nextElementSibling or children[i].

I had a lot of fun building this project. Feedback would be appreciated! 😍

Community feedback

Uwuigbe Julius Osemwengie• 380

@Call4julius

Posted 9 months ago

Nice work.

There is small problem with your transition though.

The transition effect you added will not come into play because the browser only recognizes where to start, that is height: 0, but doesn't know where to end it because of the height: max-content. It will transit smoothly if you could set a final max-height of say 8rem.

Marked as helpful

Levin Bänninger• 40

@levinbaenninger

Posted 9 months ago

@Call4julius Thanks for your feedback! I corrected the mistake and now it works just as I expected.

Adeolu Miracle• 390

@OGBENI-NG

Posted 9 months ago

Good job! I like the transition. To prevent the answer text overflow, you need to use overflow-x-hidden in the parent of the answer or the answer itself.

Levin Bänninger• 40

@levinbaenninger

Posted 9 months ago

@OGBENI-NG Thank you for your feedback!

Adeolu Miracle• 390

@OGBENI-NG

Posted 9 months ago

@levinbaenninger you are welcome

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