FAQ Accordion Card with CSS and JavaScript

Community feedback

• 

  Eileen dangelo•1,600

  @EileenpkPosted almost 2 years ago

  Hi Abieb, your code looks good. Here is how you can rotate the arrow onClick and rotate it back to starting position when its clicked again.

  • Add a class of question to all the arrow images in the HTML.
  • In your JavaScript do something like this to target all the arrow images.

  const question = document.querySelectorAll('.question')
  question.forEach(el => {
      el.addEventListener('click', function (){
          el.classList.toggle('upside-down');
      });
  });
  

  • In your CSS add

  .upside-down img{
      transform: rotate(180deg);  
     }
  

  Here is a link that goes to my solution to this challenge if you want to see how I did it. https://github.com/Eileenpk/faq-accordion-card

  If you found this helpful please mark it as such :)

  • Let's connect on LinkedIn! - @Eileenpk

  Marked as helpful

  0

  ---

  

  Abieb_Guardian•200

  @AbibGuardian50Posted almost 2 years ago

  @Eileenpk HI sorry for my late answer i will give it a try for your answer thank you Eileen! Have a great day

  0