Submitted almost 4 years ago

FAQ accordion card using vanilla JS

@placoderm

A solution to the FAQ accordion card challenge

Solution retrospective

The biggest challenge for me on this project was all of the images and the fact that some extended beyond a div and some did not. The background images were also tricky and I used some css that I hadn't before.

As well, the animations on the accordion were tricky, getting the rotate correct and closing the sections when new ones opened.

I really appreciated looking at the front end of other people's projects, both those that implemented everything correctly (because I didn't believe it was all possible!) and those that didn't so I could see the things I needed to focus on getting right.

I would appreciate feedback on:

the way I aligned the image
the way I structured the divs to allow the JavaScript to do its thing.
the opening and closing animation. I had to have a fixed height for the answers in order to animate this. I'd appreciate knowing another way to do it where I could use auto height and still get the animation.

Code

Please log in to post a comment

Community feedback

P
Gurvinder Singh•580
@Gurvinder-Codes
Posted over 3 years ago
@placoderm for the 3rd point you can simply set the display: none for the answer and then when the click event on the question is triggered, you can toggle a class with display: block to the answer.

Hope this helps.

Peace :)
P
Pillippa Ignacia Pérez Pons•460
@Pillin
Posted almost 4 years ago
Hi! I hope that you are well

If you want to centered the layout vertically

you can add in main tag
```
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
```
and in #card remove the margin. I hope It has been helpful.

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