Accordion animation in Native JS

[Hipy Cas]

I am trying to get auto-animate working with an accordion and pure JS, yet it isn't working, but with a list it is. My code is the following:

    <div class="faq">
      <h4 class="header">
        Title of the question
      </h4>
      <div class="content" hidden>Nice stuff here</div>
    </div>

<script type="module">
import autoAnimate from "https://cdn.jsdelivr.net/npm/@formkit/auto-animate@1.0.0-beta.1/index.min.js";

const faq_header = document.querySelector(".faq > .header");
const faq_content = document.querySelector(".faq > .content");

faq_header.addEventListener("click", () => {
  faq_content.toggleAttribute("hidden");
});

autoAnimate(faq);
</script>

How can I set this up to work?

[Justin Schroeder]

Your situation needs to conform to one of these:

Adding/removing the "hidden" attribute does not satisfy those. You could re-write yoru code to use .remove() and .appendChild() (or similar) to get it working.