FAQ Accordion Card

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

Best my friend