I am creating a filter system using Elementor Pro and FacetWP. I want the Facets to be expandable so I have put the Facets in the Elementor (nested) accordion widget with an accordion item for each facet.
The Facets have been set up to hide ghosts so only available filter options are displayed. On the occasion that no filter options are available for a specific facet, I would like the hide the accordion item that it sits in.
Here is the accordion HTML. You can see that there are no filter options in the last facet:
<div class="e-n-accordion" aria-label="Accordion. Open links with Enter or Space, close with Escape, and navigate with Arrow Keys">
<details id="e-n-accordion-item-7460" class="e-n-accordion-item" style="display: none;">
<summary class="e-n-accordion-item-title" data-accordion-index="1" tabindex="0" aria-expanded="false" aria-controls="e-n-accordion-item-7460">
<span class="e-n-accordion-item-title-header"><div class="e-n-accordion-item-title-text"> Gender </div></span>
<span class="e-n-accordion-item-title-icon">
<span class="e-opened"><i aria-hidden="true" class="fas fa-minus"></i></span>
<span class="e-closed"><i aria-hidden="true" class="fas fa-plus"></i></span>
</span>
</summary>
<div role="region" aria-labelledby="e-n-accordion-item-7460" class="elementor-element elementor-element-0254f2d e-con-full e-flex e-con e-child" data-id="0254f2d" data-element_type="container" data-settings="{"content_width":"full"}">
<div class="elementor-element elementor-element-09a398f elementor-widget elementor-widget-facetwp-facet" data-id="09a398f" data-element_type="widget" data-widget_type="facetwp-facet.default">
<div class="elementor-widget-container">
<div class="facet-wrap">
<div class="facetwp-facet facetwp-facet-gender facetwp-type-radio" data-name="gender" data-type="radio">
<div class="facetwp-radio checked" data-value="">Any</div>
<div class="facetwp-radio" data-value="option_1">
<span class="facetwp-display-value">Option 1</span>
<span class="facetwp-counter">(40)</span>
</div>
<div class="facetwp-radio" data-value="option_2">
<span class="facetwp-display-value">Option 2</span>
<span class="facetwp-counter">(22)</span>
</div>
<div class="facetwp-radio" data-value="option_3">
<span class="facetwp-display-value">Option 3</span>
<span class="facetwp-counter">(20)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</details>
<details id="e-n-accordion-item-7461" class="e-n-accordion-item" style="" open="">
<summary class="e-n-accordion-item-title" data-accordion-index="2" tabindex="-1" aria-expanded="true" aria-controls="e-n-accordion-item-7461">
<span class="e-n-accordion-item-title-header">
<div class="e-n-accordion-item-title-text"> Brand </div>
</span>
<span class="e-n-accordion-item-title-icon">
<span class="e-opened"><i aria-hidden="true" class="fas fa-minus"></i></span>
<span class="e-closed"><i aria-hidden="true" class="fas fa-plus"></i></span>
</span>
</summary>
<div role="region" aria-labelledby="e-n-accordion-item-7461" class="elementor-element elementor-element-de1dbf3 e-con-full e-flex e-con e-child" data-id="de1dbf3" data-element_type="container" data-settings="{"content_width":"full"}">
<div class="elementor-element elementor-element-5732767 elementor-widget elementor-widget-facetwp-facet" data-id="5732767" data-element_type="widget" data-widget_type="facetwp-facet.default">
<div class="elementor-widget-container">
<div class="facet-wrap">
<div class="facetwp-facet facetwp-facet-brand facetwp-type-radio" data-name="brand" data-type="radio">
<div class="facetwp-radio checked" data-value="">Any</div>
<div class="facetwp-radio" data-value="option_1">
<span class="facetwp-display-value">Option 1</span>
<span class="facetwp-counter">(7)</span>
</div>
<div class="facetwp-radio" data-value="option_2">
<span class="facetwp-display-value">Option 2</span>
<span class="facetwp-counter">(6)</span>
</div>
<div class="facetwp-radio" data-value="option_3">
<span class="facetwp-display-value">Option 3</span>
<span class="facetwp-counter">(2)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</details>
<details id="e-n-accordion-item-7462" class="e-n-accordion-item" style="">
<summary class="e-n-accordion-item-title" data-accordion-index="3" tabindex="-1" aria-expanded="false" aria-controls="e-n-accordion-item-7462">
<span class="e-n-accordion-item-title-header">
<div class="e-n-accordion-item-title-text"> Metal </div>
</span>
<span class="e-n-accordion-item-title-icon">
<span class="e-opened"><i aria-hidden="true" class="fas fa-minus"></i></span>
<span class="e-closed"><i aria-hidden="true" class="fas fa-plus"></i></span>
</span>
</summary>
<div role="region" aria-labelledby="e-n-accordion-item-7462" class="elementor-element elementor-element-5c79546 e-con-full e-flex e-con e-child" data-id="5c79546" data-element_type="container" data-settings="{"content_width":"full"}">
<div class="elementor-element elementor-element-d09aaba elementor-widget elementor-widget-facetwp-facet" data-id="d09aaba" data-element_type="widget" data-widget_type="facetwp-facet.default">
<div class="elementor-widget-container">
<div class="facet-wrap">
<div class="facetwp-facet facetwp-facet-metal facetwp-type-radio" data-name="metal" data-type="radio"></div>
</div>
</div>
</div>
</div>
</details>
</div>
I tried adding this javascript to an HTML widget on the page but this just hides the first accordion item regardless of it's content.
<script>
if (document.querySelector('.facetwp-facet').innerHTML.trim() === '') {
document.querySelector('.e-n-accordion-item').style.display = 'none';
}
</script>