Skip to content
Submitted almost 3 years ago

FAQ Section using SASS

Kristiana12•425
@Kristiana12
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

Hey Everyone! This is my solution to the FAQ section.

I need some help with a transition I have been trying to make but haven't succeeded yet. When the answer 'hides' I want to transition the height, so that it closes smoothly, I tried to put a transition to .question__answer but I didn't see any effect. Does anyone have any suggestions?

Your answer is very much appreciated! Thank you in advance! :)

Community feedback

  • Henry Zheng•420
    @LonelyBuddyPosted almost 3 years ago

    I just tried it in the Chrome dev tool, and it works by giving .wrapper .container .question.active p a fixed height value. I think the transition just doesn't work on auto value🤔.

    Marked as helpful
    0
  • Amon•2,560
    @A-amonPosted almost 3 years ago

    Hmm... such a weird issue! 👀 This might not be the best solution but, after referring to this, turns out that setting the height to a value with any unit other than % will solve it. For example, try height:3rem; instead of auto. 😲

    0
    Kristiana12•425
    @Kristiana12Posted almost 3 years ago

    @A-amon thanks for your tip! I tried it on Vscode, but I didn't see any difference

    0
    Amon•2,560
    @A-amonPosted almost 3 years ago

    @Kristiana12 😲Which height's value did you change? I forgot to add it was supposed to be .wrapper .container .question.active p.

    Marked as helpful
    0
    Kristiana12•425
    @Kristiana12Posted almost 3 years ago

    @A-amon Thank you!

    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