Submitted 8 months ago

fem_faq-accordion

Theunis• 210

@theYuun

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

My code that used something other than the max-height CSS property is long gone, but here I had a tough time properly managing the expand/collapse transition. CSS transitions snap between height: auto; and height: 0; It also kept the space open where the answer text is kept with transform: scaleY(0). Any ideas on how to properly address that?

Community feedback

Raza Abbas• 790

@RazaAbbas62

Posted 8 months ago

Consider using the CSS max-height property for the transition instead of directly manipulating the height property. This approach allows for a smoother expand/collapse transition without the snapping behavior. Additionally, you can utilize the transform property with scaleY(0) for collapsing and scaleY(1) for expanding to handle the visibility while avoiding the space issue.

I hope this will help.

Happy Coding:)

Marked as helpful

Theunis• 210

@theYuun

Posted 8 months ago

@FazeenIjaz I ended up using the max-height property, since the scaleY() left a bunch of whitespace where the text would be. Maybe I should do the scaling on a more parental object. Whichever way it's supposed to be done, I'm cool with the max-height method. Thank you for the feedback :)

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