FAQ Accordion Card

Community feedback

• 

  Lucas Piputto•305

  @paiputPosted over 3 years ago

  You could create different functions that use a for of loop to iterate through:

  • each questions' title
  • each questions' arrow
  • each questions' paragraph

  You could create classes in CSS, and, in those for loops, remove or add those classes to each <div class="line"> elements.

  I would use classes for all the titles, arrows, and paragraphs. This would be useful for example with the arrows, because you could use just one image, and when you click on the question or on the arrow, you add that image a class like this: .rotate-arrow {transform: rotate(180deg); transition: transform ease .5s;}`

  And in the JS, you could do something like this:

  const = document.querySelectorAll('.titleArrows'); // In your case your class is '.straight'  I think
  
  function rotateArrow(targetElement) {
      for (arrow of titleArrows) {
          arrow.classList.remove('rotate-arrow');
      }
  
      targetElement.classList.add('rotate-arrow');
  }
  
  

  After created those functions, you should create an eventListener that detects if you clicked on a question title, or on an arrow. You could do something like this:

  // I made it like this
  const box= document.querySelector('.box');
  container.addEventListener('click', (e) => {
      if (e.target.classList.contains('questionTitle')) {
           rotateArrow(e.target.firstElementChild);
      }
      else if (e.target.classList.contains('titleArrows')) {
          rotateArrow(e.target);
      }
  }
  

  The example above is just to give you an idea. Consider that the this example cannot be applied as is in your html because the layout is probably different.

  I hope this example has been helpful for you.

  1

  ---

  

  Basak ulcay•110

  @basakulcayPosted over 3 years ago

  Thank you @paiput I will try applying these suggestions.

  0