Repsonsive FAQ Accordion [Vanilla CSS and JS] đ¤Š
Design comparison
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
- @Call4juliusPosted 10 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 theheight: max-content
. It will transit smoothly if you could set a finalmax-height
of say8rem
.Marked as helpful1@levinbaenningerPosted 10 months ago@Call4julius Thanks for your feedback! I corrected the mistake and now it works just as I expected.
0 - @OGBENI-NGPosted 10 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.
1
Please log in to post a comment
Log in with GitHubJoin 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