Skip to content
Submitted about 3 years ago

FAQ Accordion Card (HTML, CSS, Flexbox, JS)

Bayoura•105
@Bayoura
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 there!

This is the first project on frontend mentor where I used JS (not a lot, though). The most difficult thing for me was definitely the positioning of the images... I am rather happy with how it turned out in the end, but please let me know your thoughts!
I am happy about any piece of advice or feedback you're willing to give!

Thank you in advance! :)

Community feedback

  • bunee•2,020
    @buneeIsSloPosted about 3 years ago

    Hey! @Bayoura, Great job on this challenge. Here are some of my suggestions...

    • You could add an overflow-y: scroll; to the accordion-text. This will prevent the whole accordion from expanding when multiple questions are opened.

    • Good job on the JS code, but you could have achieved the revealing effect by using the details tag. You can learn more about it here

    Hope this helps :)

    Marked as helpful
    1
  • Igor Ostojic•300
    @igor-ostojicPosted almost 3 years ago

    Amazing job done !

    I love what you did with JavaScript !

    1
    Bayoura•105
    @BayouraPosted almost 3 years ago

    @igor-ostojic 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