Skip to content
Submitted over 3 years ago

FAQ Accordion Card

Sravan•220
@SravanSTG
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 everyone!

This is my first challenge using javascript and I struggled a lot with making accordions collapse on click before finally making it work. I would like to improve some things though -

  1. I have made it such that one accordion will always remain uncollapsed, otherwise the background pattern breaks (and it also looks nice with one accordion open). But there seems to be a little bug. When you click on an accordion that is already open, it plays a ping-pong like animation. I want it to be still and do nothing. How can I achieve this? I tried using if statements but it didn't work.

  2. On desktop mode, how to cut-off the portion that is out of the container? I used overflow: hidden but it also cuts-off the box on top of it, which didn't look good.

Any feedback is appreciated. Thank you!

Community feedback

  • Fluffy Kas•7,715
    @FluffyKasPosted over 3 years ago

    Hiyo,

    The ping-pong like animation I believe comes from the fact that you don't have a min-height: 100vh on your body. When I add this to your code, it seems to get rid of the problem. Combine this with display: grid and place-items: center to center your component.

    It would also be nice if not only the button was clickable, but the whole question. I had a hard time clicking on that tiny icon. I'd suggest adding cursor: pointer as well.

    For margins and paddings, you could use relative units instead of setting them in pixels, unless it's really necessary.

    0
    Sravan•220
    @SravanSTGPosted over 3 years ago

    Hi @FluffyKas,

    Thank you for the feedback. min-height: 100vh doesn't seem to work (atleast on my device). And display: grid, place-items: center somehow pushes the container a little to the right.

    Clicking on the question displays the answers now. Thanks for pointing that out.

    1
    Fluffy Kas•7,715
    @FluffyKasPosted over 3 years ago

    @SravanSTG Remove the margins you set for your container (they're not needed anymore since you centered your element already) and it should be fine! ^^ Using the browser's inspector and disabling/enabling properties can help a lot to find a solution to your problems :)

    Marked as helpful
    1
    Sravan•220
    @SravanSTGPosted over 3 years ago

    @FluffyKas 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