html css flex js

Community feedback

• 

  Luka•820

  @LukaKobaidzePosted almost 3 years ago

  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.

  Marked as helpful

  1
• 

  Aditya Singh•460

  @adityas24Posted almost 3 years ago

  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 🙂👍

  1
• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  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!

  1