FAQ Accordion

Community feedback

• 

  Aakash Verma•9,520

  @skyv26

  Posted 7 months ago

  Hello @CoolNight99,

  Great work on the implementation! 👏 Here are some suggestions to improve your code and styling:

  ---

  JavaScript Code Feedback 💡

  1. Code Compactness and Readability 🧹:

     • Consider using functions to encapsulate repeated logic (e.g., toggling FAQ visibility). This will reduce redundancy and improve readability.

     • Here's a simplified version of your click and keypress handlers:

       const toggleFAQ = (faqAnswer, plusIcon) => {
           const isVisible = window.getComputedStyle(faqAnswer).display !== "none";
           faqAnswer.style.display = isVisible ? "none" : "block";
           plusIcon.src = isVisible
               ? "./assets/images/icon-plus.svg"
               : "./assets/images/icon-minus.svg";
       };
       
       faqQuestionDivs.forEach((faqQuestionDiv) => {
           const plusIcon = faqQuestionDiv.querySelector(".plus-icon");
           const faqAnswer = faqQuestionDiv.nextElementSibling;
       
           faqAnswer.style.display = "none";
       
           const handleToggle = () => toggleFAQ(faqAnswer, plusIcon);
       
           plusIcon.addEventListener("click", handleToggle);
           plusIcon.addEventListener("keypress", (event) => {
               if (event.key === "Enter") handleToggle();
           });
       });
       

  2. Commenting for Other Developers 📝:

     • Add comments to explain your code for future maintainers. For instance:

       // Initialize FAQ answer to hidden state
       faqAnswer.style.display = "none";
       
       // Toggle FAQ visibility on click or Enter keypress
       

  3. Accessibility Considerations 🌟:

     • Ensure the plus-icon has proper tabindex for keyboard navigation and meaningful aria-label for screen readers.

  ---

  CSS Feedback 🎨

  1. Background Image Issue 🌐:

     • For the background image not spanning full width, try adding the background-size property like this:

       body {
           background-size: contain; /* Adjust based on your design preference */
       }
       

  2. Responsive Design 📱:

     • Test your design on various screen sizes to ensure the layout adapts well. You might need a media query for larger screens to fine-tune the layout.

  ---

  Summary 🌈

  Your code already looks promising! By making it more modular and developer-friendly with comments and accessibility improvements, it'll be even better! Let me know if you need further assistance. 😊

  Happy coding! 🚀

  11