FAQ-accordion

Community feedback

• 

  Harsh Kumar•5,820

  @thisisharsh7

  Posted about 2 months ago

  Great job on the completing the challenge!

  Strengths:

  • Semantic HTML structure and well-organized components.
  • JavaScript toggles FAQs correctly, and logic for closing others is well implemented.
  • Good use of BEM-like class naming.

  Some suggestions:

  • There's a nested <p> inside another <p> in FAQ 1. Replace the inner <p> with a <span> or remove it:

     <p class="ans">...content...<p></p></p> <!-- ❌ Invalid -->
  

  • Consider using <button> instead of a clickable <span> for better accessibility and screen reader.
  • Add a CSS transition to .ans for a smoother accordion effect:

  .ans {
    transition: max-height 0.3s ease;
  }
  

  • Consider toggling a CSS class instead of directly modifying style.display

  allAnswer[i].classList.remove("show");
  // CSS: .show { display: flex; }
  

  Great job overall - happy coding.

  11