Submitted about 2 years ago

FAQ Card Component

Arnold-Odhiambo• 60

@arnold-ryan

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

This is a solution for...

FAQ accordion card

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I have a few questions I need help with:

How do you get the svg edges to disappear inside the parent container, is it overflow hidden or something else?
How do I make the transition smooth, at the moment mine is a bit jerky? Thanks

Community feedback

Boonyarit Iamsa-ard• 80

@boonyarit-iamsaard

Posted about 2 years ago

Hi there 👋,

If you mean the bg-pattern-*.SVG, I set it in CSS as the background image of the card container and then use the background-position properties to align with others.
I use JavaScript to set the answer max height as CSS Combinators wouldn't work for transition. Check this out 📌

Enjoy challenging 👍

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