Skip to content
Submitted over 3 years ago

FAQ Accordion featuring JS

Lesley Wesley•365
@LesleyWesley
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 guys! This was my first JavaScript project that I built entirely on my own, so I'm actually really proud of how this turned out, but I'm totally open to any feedback! (Also, as a side note, that cardboard box in the desktop design was the bane of my existence. I just wanted to put that out there LOL)

Community feedback

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

    Hello there, Lesley Wesley! 👋

    Nice work on this challenge! 🙌 Your solution looks good and works great and kudos for trying out something new with JS! 😀

    I don't really have anything to suggest but I thought I'd let you know that you can use the native HTML <details> and <summary> elements to easily create a fairly accessible accordion without having to use any JS. If you’d like to learn more about those elements and how you can use them, check out this helpful article from MDN. Maybe something to try out in a future project! 😉

    Keep coding (and happy coding, too)! 😁

    Marked as helpful
    0
    Lesley Wesley•365
    @LesleyWesleyPosted over 3 years ago

    @ApplePieGiraffe I hadn't even heard of details and summary tags, so thanks for the heads up! I bookmarked the article for future reference :)

    1
  • Anthony Rodriguez•65
    @LuwuuPosted over 3 years ago

    Good job, I would suggest putting overflow to scroll on the FAQ because it throws off the look if you have multiple questions open.

    Marked as helpful
    0
    Lesley Wesley•365
    @LesleyWesleyPosted over 3 years ago

    @Cyberiaa I had noticed that issue as well, but I wasn't sure how to fix it, so thank you! :)

    0
  • Grace•31,230
    @grace-snowPosted over 3 years ago

    Hey, this is really good!!

    The main improvements I suggest are

    • using buttons as the click handlers for the faq. That way you get all the keyboard and cmscreenreader accessibility for free with no extra work
    • Instead of changing inline styles via javascript, you can handle all the styling via css. I would just use js to toggle one class on the parent of the wrapper around the question on answer. You can style everything from there in css - show the answer, flip the icon, change the weight etc. You don't need to change styles on each thing individually in js, and it's better to to contain all styles to css
    Marked as helpful
    0
    Lesley Wesley•365
    @LesleyWesleyPosted over 3 years ago

    @grace-snow As usual, thank you for the tips! I made the changes you suggested :)

    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