FAQ Accordion - CSS, Flexbox, JavaScript

Community feedback

• 

  P

  Habeeb Kareem•690

  @olaide-hok

  Posted 4 months ago

  Well done!

  Some areas to improve would include updating the css of some selectors:

  .accordion {
  	font-family: Work Sans;
  }
  
  section {
      border-bottom: 1px solid var(--Light-Pink);
  }
  
  section .accordion:hover {
      color: #AD28EB;
  }
  
  section p {
      color: #8B6990;
  }
  
  

  On the JS side,

  1. Performance: Your code uses document.getElementsByClassName, which returns a live HTMLCollection. This can cause performance issues if the DOM changes frequently. Use document.querySelectorAll instead, which returns a static NodeList:

  let acc = document.querySelectorAll(".accordion");
  

  2. Avoid Inline Styles: The code directly manipulates the style.display property of the panel. This approach is not ideal because it mixes JavaScript with presentation logic, making it harder to maintain and override styles with CSS. Consider using CSS classes to control visibility and transitions.

  For example:

  .panel {
    display: none;
    transition: max-height 0.3s ease-out;
    overflow: hidden;
    max-height: 0;
  }
  
  .panel.active {
    display: block;
  }
  
  

  Update the JavaScript to toggle the .active class:

  if (panel.classList.contains("active")) {
      panel.classList.remove("active");
      icon.src = "./CSS/images/icon-plus.svg";
      icon.alt = "Open-FAQ-Icon";
  } else {
      panel.classList.add("active");
      icon.src = "./CSS/images/icon-minus.svg";
      icon.alt = "Close-FAQ-Icon";
  }
  

  00

  Marked as helpful