html css flex js

Hello!

To rotate arrow, you need to use following CSS property: transform: rotate().

I see that you toggle active class once the element is clicked. Here's the code on how to implement arrow rotate:

.faq-cont.active > .faq-ques > img {
  transform: rotate(180deg);
}

If you aren't familiar with > selector, basically it selects direct child of the element (source). As you can see, class faq-ques is direct child of faq-cont, and img is direct child of faq-ques. If you want to be more specific, you can add class to img and select it with the class.

Hey good job!

You can use transform: rotate() property on the arrow and rotate it by 180degree when the arrow is being clicked. You can do this both with css and javascript.

All the best 🙂👍

Hay ! Good Job you made it look nearly perfect to the preview

These below mentioned tricks will help you remove any Accessibility Issues

-> Add Main tag after body like it should be your container

-> For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc

-> But use header tag only once in main heading element.

-> I see you have a different design from the preview just try to come close to it 😊

Keep up the good work!