Skip to content
Submitted over 3 years ago

FAQ accordian card using HTML, SCSS, and JS

Syed Ali Mansoor•460
@syedalimansoor
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion card
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello!

How did you tackle the problem of transitioning the FAQ answers' heights when they expand from 0 to auto? I kept height constant at auto, and instead transitioned the max-height from 0 to a hard-coded value, in this case, 4em.

Do let me know if there is a better way. Thanks!

Community feedback

  • Agata Liberska•3,995
    @AgataLiberskaPosted over 3 years ago

    Hi @alimansoor-create! I transitioned from max-height: 0 to max-height: max-content :)

    Also, have a look at your solution on tablet size - the image is cut off by the text content - maybe you could modify your media query or make the image smaller?

    Hope this helps :)

    1
    Syed Ali Mansoor•460
    @syedalimansoorPosted over 3 years ago

    @AgataLiberska Thank you for answering my question! I didn't know transitioning to max-content was an option. I'll also look into the cropping issue soon.

    0

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