Skip to content
Submitted over 4 years ago

Responsive FAQ accordion card, using HTML, CSS & JS

Hoophelie•110
@HOOPhelie
A solution to the FAQ accordion card challenge
Preview (opens in new tab)Code (opens in new tab)

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

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    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)! 😁

  • Samuel Palacios•615
    @samuelpalaciosdev

    Hi, Hoophelie👋

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

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

  • Agata Liberska•4,075
    @AgataLiberska

    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 :)

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