FAQ Accordion Card

Community feedback

• 

  Carl•855

  @CarlHummPosted about 1 year ago

  Hi there, nice try

  Your JS doesn't work as accordionContent is a nodelist, not an element

  You are attempting to toggle a class on accordionContent which, like accordionHeadings, is a nodeList and not an element. For each click, we instead want to reference the accordion-content relative to the clicked element. How do we do that?

  Here are just two common options.

  1. i.nextElementSibling.classList.toggle('hidden')
  2. i.parentElement.querySelector('.accordian-content').classList.toggle('hidden')

  accordianHeadings.forEach(function (i) {
      i.addEventListener("click", function () {
          // Replace me 
      })
  })
  

  So i references the clicked element (the heading). Working from the heading we can either go up one to the parent and search for accordion-content, or use the nextElementSibling property. Since our accordion is composed of headings and content, the nextElementSibling will always be the accordion-content which works well for us.

  Alternatively you could use the HTML Details & Summary Elements

  <details>
    <summary>Accordion Heading</summary>
    Something small enough to escape casual notice.
  </details>
  

  Unfortunately I only had time to write a solution for the JS. Perhaps someone else can help with the layout and images.

  Good luck on your future projects

  Marked as helpful

  1
• 

  HamzehDehnavi•20

  @HamzehDehnaviPosted about 1 year ago

  Best my friend

  0