AIOSEO FAQ Block accordion

;(() => {

  const accordionItems = document.querySelectorAll(".wp-block-aioseo-faq");

  if (!accordionItems.length) {

    return;

  }

  accordionItems.forEach((item) => {

    const itemSummary = item.querySelector(".aioseo-faq-block-question");

    const itemContent = item.querySelector(".aioseo-faq-block-answer");

    itemSummary?.addEventListener("click", () => {

      itemContent?.style.setProperty(

        "--content-height",

        `${itemContent.scrollHeight}px`

      );

      item.classList.toggle("is-open");

    });

  });

  const faqStyles = `

	  .wp-block-aioseo-faq {

		  position: relative;

	  }

	  .aioseo-faq-block-question {

	  	  background-color: #f9f9f9;

		  display: flex;

		  align-items: center;

		  justify-content: space-between;

		  padding: 1rem;

		  max-width: 100%;

		  cursor: pointer;

		  margin-block: 0;

	  }

	  .aioseo-faq-block-question::after {

		  content: "\\002B";

	  }

	  .wp-block-aioseo-faq.is-open .aioseo-faq-block-question::after {

		  content: "\\2212";

	  }

	  .aioseo-faq-block-answer {

		  padding-inline: 1rem;

		  height: 0;

		  opacity: 0;

		  overflow: hidden;

		  transition: height 0.2s, opacity 0.3s;

	  }

	  .aioseo-faq-block-answer > :first-child {

		  margin-top: 1rem;

	  }

	  .aioseo-faq-block-answer > :last-child {

		  margin-bottom: 1rem;

	  }

	  .wp-block-aioseo-faq.is-open .aioseo-faq-block-answer {

		  height: var(--content-height, auto);

		  opacity: 1;

	  }

	  `;

  const styleElement = document.createElement("style");

  styleElement.id = "aioseo-faq-styles";

  styleElement.innerText = faqStyles;

  document.head.appendChild(styleElement);

})();