SEMANTIC HTML | CSS @MEDIA QUERIES | SIMPLE JS

Community feedback

• 

  P

  subu•390

  @subu-vPosted over 2 years ago

  Try this, for myself i simply created a utility class for rotating the svg icon-down.

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

  When the svg icon-down is being clicked, i will add this class to the element and it will rotate 108deg which will make the icon look upside.

  const showAnswer = document.querySelectorAll(".show-answer");
  
  for (let i = 0; i < showAnswer.length; i++) {
    showAnswer[i].addEventListener("click", function () {
      showAnswer[i].classList.toggle("rotate--180deg"); 
     // This will add or remove the utility class whenever the icon is clicked
      );
  }
  

                    <img
                      class="show-answer"
                      src="../images/icon-arrow-down.svg"
                      alt="chevron-down"
                    />
  
  

  look at my github to see how i done it. https://github.com/subu-v/FAQ-accordian-card.git

  0
• 

  Yokke•620

  @JexintePosted over 2 years ago

  Hey @dumpdope1 ,

  I looked your code and I'm just gonna give you a recommandation that someone else gived me there is a native tags on html that give the toggle state when a question is open and their names are <details> and <summary> more details here : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

  I'm not gonna tell you what to do on the JS part I struggle too ( I've done the challenge twice with better result on the last try) I'm sure someone is gonna help you about that.

  And when you need to make rotate an svg when a question is toggle with <details> use the attribute : [open] to do what you need on css you'll find more details too just by doing research on google .

  I know it's little hard at the beginning but don't hesitate to restart the challenge again the time passed to done it is not important as long you finished what you start (at least this is what I'm thinking)

  In hope it helps !

  0