Skip to content
Submitted 10 months ago

Repsonsive FAQ Accordion [Vanilla CSS and JS] 🤩

Levin Bänninger•40
@levinbaenninger
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

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

  • Uwuigbe Julius Osemwengie•380
    @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 the height: max-content. It will transit smoothly if you could set a final max-height of say 8rem.

    Marked as helpful
    1
    Levin Bänninger•40
    @levinbaenningerPosted 10 months ago

    @Call4julius Thanks for your feedback! I corrected the mistake and now it works just as I expected.

    0
  • Adeolu Miracle•390
    @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
    Levin Bänninger•40
    @levinbaenningerPosted 10 months ago

    @OGBENI-NG Thank you for your feedback!

    0
    Adeolu Miracle•390
    @OGBENI-NGPosted 10 months ago

    @levinbaenninger you are welcome

    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