FAQ accordion card with html, css and javascript

Hello, Toyger! 👋

Nice work on this challenge! 🙌

In addition to the great feedback you've already received, one more tiny thing I suggest you do to improve your solution is to make the titles of the FAQs bolded when they are opened (as in the original design) so that it's easier to distinguish them from the answer of the FAQ. 😀

Also, I think adding a bit of margin/padding to the bottom of the accordion card to give it some space between itself and the attribution at the bottom of the screen (in the mobile layout) would be a nice idea! 😉

Keep coding (and happy coding, too)! 😁

Hi Toyger,

One easy improvement would be to make your HTML more semantic. It would be easy, for example, to switch out some of the div sections in the text dropdowns with details elements.

It also looks like your FAQ section is sliding over into the left side of your card when the window shrinks and cutting off the image there. You can fix that by setting the width of the card with just width rather than using max-width.

I think you should also find a way to center the card -- right now you've got margin-top pushing the card down, but if someone's screen is a little too small, it cuts off the bottom of the card. Maybe use flexbox, or one of the centering strategies here:

https://css-tricks.com/centering-css-complete-guide/

I struggled with this one also, and it's interesting to see that we did some of the same things. I also wrote my Javascript so that the user can only open 1 according section at a time.

Hey Toyger,

I think your solution is looking really good! 🙌🏻

The things I found are that:

• The animation on the answer in the FAQ is a bit slow
• The hover on the answer is a bit odd. The color changing and the cursor becoming a pointer suggests the answers is somehow interactive.

Curious to see what feedback other people have! Keep up the nice work! 💪🏻