Skip to content
Submitted 10 months ago

fem_faq-accordion

Theunis•210
@theYuun
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion
  • HTML
  • CSS
  • JS
1newbie

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
    @RazaAbbas62Posted 10 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
    0
    Theunis•210
    @theYuunPosted 10 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 :)

    1

Please log in to post a comment

Log in with GitHub

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