Skip to content
Submitted over 3 years ago

Responsive FAQ accordion card, using HTML, CSS & JS

Hoophelie•110
@HOOPhelie
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 Everybody! 🖐

This challenge was trickier than I thought:

  • To avoid the overflow:hidden from the white card to apply on the box image on desktop mode: I used an empty div to position the box. The empty div has the same dimensions as the white card, so the box will move accordingly to the white card's resizing.
  • I added a transition so the answer can unwind smoothly when clicking on the question. I had to include the height + the padding-bottom in the transition.
  • I tried making it pixel perfect, but it means the card is not centered

I'm not sure I proceeded correctly for these points. Any feedback is welcome! 😊 Thank you in advance

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    Greetings, Hoophelie! 👋

    Nice to see you complete another challenge! 😀 Good job on this one! 👏 Your solution looks great and the accordion works well! 👍

    Two minor suggestions I have are making sure there is always a little bit of space between the accordion card and the bottom of the page (even when multiple FAQs are opened) and adding cursor: pointer to the FAQs so that users can even more easily tell that they are clickable. 😉

    Keep coding (and happy coding, too)! 😁

    2
  • Samuel Palacios•615
    @samuelpalaciosdevPosted over 3 years ago

    Hi, Hoophelie👋

    Great job on this challenge. Your solution looks good and scales pretty well👍

    I hope you have a nice day, keep coding!💙

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

    Hi @HOOPhelie, well done on this challenge. Don't worry about making it pixel perfect, it really doesn't need to be!

    Nice work with the transitions, I think it would be great if you added one to the toggle arrows as well :)

    There is one problem though (and it's the same mistake I made with this challenge) - at the moment the accordions are not accessible as there is no way to get to them using the keyboard. To make them accessible, you could use buttons as clickable elements :)

    Hope this helps :)

    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