FAQ Accordion HTML CSS JS

Hi

I'm not exactly sure why but I am really struggling to get the clicks to register when I'm tapping on mobile. I'm having to tap loads of times to get them to open.

It would be great if you made this accessible by using natively interactive elements for the click handlers (that might also improve the mobile performance and allow keyboard users like me to open the faqs). To do that you'd just need to remove the h2s, and make the question div into a button.

I would probably make those icons into background images or pop them inside pseudo elements instead of including in the html too. If you do include them in image tags like this they need alt="" aria-hidden="true"

One definite improvement you could make to this is not including jquery! You don't need it at all. You're already writing vanilla js (it's a mixture in your js file) so why not lose all the bloat of a huge jquery library from this.

I hope these ideas are helpful

Great work but a couple of suggestion. When I resize, the small box seems to go of the image with the lady and upon further looking in your css, you made it absolute, but, it is relative to the body. Not the container that is why I resize, it scales of, but scales with the body. So to fix this, you could add position: relative to the container right, then you could just set the small box to top: 50% and adjust only the left property on it so that even when I resize it. Your small box will only be placed in the box of the container. Also it will be prettier to add a cursor: pointer on the different accordions so that it feels more naturally interactive right. Other than that, good job^