What This Does

• Removes FAQ items with empty question or answer
• Prevents empty accordion rows from showing
• Hides the entire FAQ section if no FAQs are filled
• Automatically opens the first FAQ item
• Works with Elementor Accordion and Nested Accordion

Step 1: Add CSS Class

Add this class to the OUTER FAQ container (not the accordion widget):

dynamic-post-faq

Step 2: Add JavaScript (Fluent Snippets)

Create a new JavaScript snippet and run it in:

• Location: Site Wide Footer
• Status: Active

Step 3: Add Conditional Logic

• Enable Conditional Logic
• Post Type → Posts

JavaScript Code

window.addEventListener("load", function () {
  setTimeout(function () {

    const faqSection = document.querySelector(".dynamic-post-faq");
    if (!faqSection) return;

    const items = faqSection.querySelectorAll(
      ".elementor-accordion-item, .e-n-accordion-item, details"
    );

    if (!items.length) return;

    let visibleCount = 0;

    items.forEach(function (item) {
      const text = item.textContent.replace(/\s+/g, " ").trim();

      if (text.length < 20) {
        item.remove();
      } else {
        visibleCount++;
      }
    });

    if (visibleCount === 0) {
      faqSection.remove();
      return;
    }

    const firstItem = faqSection.querySelector(
      ".elementor-accordion-item, .e-n-accordion-item, details"
    );

    if (firstItem) {
      const title =
        firstItem.querySelector(".elementor-tab-title") ||
        firstItem.querySelector(".e-n-accordion-item-title") ||
        firstItem.querySelector("summary");

      if (title) {
        title.click();
      }
    }

  }, 100);
});