Hide heading if empty results

Lilian Delfau

#161890

Hi, Is there anyway to hide not only the taxonomies options if the results are empty, but the heading (title of the taxo) too ?
Thanks

Add New Note to this Reply

Trevor Moderator

#161894

Each Tag/Category/Taxonomy/Post Meta form UI element has two options:

Display Count and Hide Empty. If you want to hide the term when the count is 0, then select @Hide Empty’ AND, in the General Settings, set both Auto Count setting to ON.

Then, you will need to write some custom javascript to trigger on page load and when the form or form controls change and to check if the controls have some or no child options, and if they do, to hide or reveal them.

Add New Note to this Reply

Jeremy Mullis

#276627

The following css solution does not YET work (July 2022), but it should be viable once browsers begin implementing css Selectors Level 4. It requires the :has pseudo class, and also requires that the :empty pseudo class ignores whitespace.

`css
.searchandfilter>ul>li:has(>ul:empty) {
display: none;
}
`

https://caniuse.com/css-has
https://caniuse.com/mdn-css_selectors_empty_matches_whitespace

Add New Note to this Reply

Jeremy Mullis

#276628

Here is a JS solution. This is a little crude, but it works. Obviously this would need run after the DOM is ready.

// test if there is a searchandfilter form on the page
if (document.querySelector(‘.searchandfilter’)) {

// query all the ul elements within our filters
const filters = document.querySelectorAll(
‘.searchandfilter > ul > li > ul’
);

// hide the parent (li) element for any that are empty
filters.forEach((filter) => {
if (filter.children.length === 0) {
filter.parentElement.style.display = ‘none’;
}
});
}

Add New Note to this Reply

Atiwit Singhaseam

#276718

Hi Jeremy Mullis, Thanks for the awesome idea! Would you mind suggest me how to write JS when apply Load results using Ajax? Thank you in advance!

Add New Note to this Reply

[Author]

Posts