Skip to content
Submitted almost 3 years ago

FAQ Accordion Card with HTML, CSS, and JS

Daniel Chang•80
@danielchang2001
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

Right now when I click the question, the answer doesn't "come down" from the question. Instead it pushes the question up to make space for the answer. I'm guessing the better way to do this is to make the answer come down while keeping the question position fixed but I couldn't get that to work. Any tips?

Community feedback

  • Account deleted

    I don' think it really matters that much how the question pops up when a question is clicked on though I agree it 'coming down' could be way better.

    • Your accordion works well, but I think it'd also better to implement the one-tab-at-a-time functionality. Though it's not a big deal.
    • The styling isn't very good, at 1440px everything seems to be ok though the box seems to be misplaced, and is all over the place once you start resizing.
    • You should also have a max-width because when you go beyond 1440px the box flows out of the container.
    • You only made it for desktop, there's no mobile view. Would be nice to have it.
    Marked as helpful
    0
    Daniel Chang•80
    @danielchang2001Posted almost 3 years ago

    @thulanigamtee What's the one tab at a time functionality? Thanks for the feedback.

    0
    Account deleted

    @danielchang2001 When one tab opens, the other tab closes.

    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