FAQ Accordion Using CSS

Community feedback

• 

  Mahmood•1,510

  @MahmoodHashemPosted 4 months ago

  Hello there

  Congratulations on successfully finishing the challenge!

  • You may already be aware that the FAQ section should function as an accordion, where opening one question hides the others. This can be achieved by adding a click event listener to the summary element of each details element. Inside the event listener, iterate through all the details elements and remove the open attribute from any details element that is not the one currently clicked.

  Revised JavaScript code:

  const details = document.querySelectorAll('details');
  
  details.forEach((detail) => {
    detail.querySelector('summary').addEventListener('click', () => {
      details.forEach((d) => {
        if (d !== detail) {
          d.removeAttribute('open');
        }
      });
    });
  });
  

  Hope that's helpful!

  Keep up the great work!

  Marked as helpful

  0

  ---

  

  Donald Zarura•210

  @doniecodesPosted 4 months ago

  @MahmoodHashem Hie. Thank you so so much for that one hey 😍 it did work.

  1