FAQ accordion card | Flexbox and JS |

Hey there Joaquin, good job on completing the challenge.

Some tips: One of the first things that caught my eye was the extra page height when going to mobile. Try min-height: 100vh on your body. Anything greater than 100 will create a longer page than your viewport can fit and will result in that scrollbar popping up.

Add a bit of line spacing in your <p> tags using line-height property. Browsers by default style <p> tags with almost no breathable line spacing. Opposite for heading tags.

• In the JS, I noticed a pattern with duplicate event listeners for arrow and answer variables. Any time you have a collection try using a loop to access each element.
• Also use the plural form for variable names when using document.getElementsByClassName

for (var n=0; n < arrows.length; n++) {
     arrows[n].addEventListener('click', function(){
          clickArrow(n)
     });
}

Hope it helps and keep on coding

It works, but seems to need multiple clicks sometimes. I think your js could be much simpler, just looping over all faqs, listening for a click on all and toggling a class on click.

If you made the divs into buttons, you'd also get all the interactive accessible behaviour for free. That would be some more work to change though as would affect your css as well.

Things to think about, anyway. Happy coding