Only display top level taxonomy on the edit post page with option to expand sub-categories

Question

We have a custom taxonomy that is hierarchical. It has so many sub-categories that to scroll through them in the edit post page is proving problematic for editors.

Is there a way to initially show only the top level items with an option to expand/collapse the sub-categories?

Here's an example showing sub-categories, if you imagine hundreds of these under a dozen main categories then you'll see the problem.

Ideally we'd just See Climate & nature with a + next to it that would open up the sub-cats when clicked:

I'm open to writing code, using a plugin, hacking the display with jQuery, anything really! I have searched and searched but been unable to find exactly what I need.

Any help or suggestions for a direction to go to try and solve this?

Answer 1

This is a VERY untested approach, but the recent addition of CSS's :has selector has been top-of-mind for me lately, and I wondered if a simple solution could be built using purely CSS..

As a proof of concept, add the following to your site's admin CSS:

#categorychecklist > li .children{display:none;}
#categorychecklist > li:has(input:checked ) .children{display:block;} 

For context, this hides all children categories in the list unless either the parent or the child has been checked. Thus, by default, you'll ONLY see the top-level categories when creating a new post. If you want to assign children categories, then you check the parent and it expands.

This doesn't let you "browse" the children categories without clicking the parent, so it's not foolproof. You'd have to click the parent, check the child, and then deselect the parent if you didn't want it. But at least it cleans up the visuals quite a bit!