Show/hide child categories if parent checked or not

Anonymous

#14132

I have a filter setup to use a custom taxonomy that is hierarchical (custom categories), and each category has at least a few (and in some cases a lot) of child categories.

I would like to have the initial list displayed hide the child categories – no problem there, was easy to do with CSS given that the UL tags are already given the class of “children”.

However, I have been struggling for hours with trying to get those child category lists to show when the parent category is checked…..I’ve tried every combination of selectors possible.

I would prefer to avoid javascript if possible, and I’m pretty sure this should be possible using CSS only, but I could use some help with it.

So far what I have is this in my stylesheet:

form#search-filter-form-102 li ul li ul.children { display: none; } //works fine
form#search-filter-form-102 li > input:checked + ul.children {display: block;} //doesn’t work

I’ve tried using li > input:checked > ul.children but that doesn’t work either.

Any ideas?

Anonymous

#14134

I suspect that the trouble is because the input is wrapped inside a label tag, which means that technically speaking, the ul.children is not a ‘sibling’ of the input, nor is it a ‘descendant’ of the label or input.

According to WC3 specifications, it is still not good practice to wrap the input inside a label, even though many browsers have no trouble with it, and even bootstrap is doing it this way, but apparently it causes problems with assistive devices to wrap the inputs – the WC3 maintains that a better practice is to have the label outside of the input and use the id and for to associate it with the correct input.

Personally I don’t mind the label wrapping, except that I think it’s interfering with my ability to select the input that is checked and then style the following ul.children….

Anonymous

#14135

OK I know I’m not giving you much time to reply (LOL) but I’m on a tight deadline.

The problem DID turn out to be the fact that the inputs are wrapped within the label tag. There is no way to select any other element based on the checked or not-checked state of the input because of this. I tested it by hacking the plugin (this file: class-search-filter-taxonomy-walker.php) and moved the labels so that they follow the input.

Now the show/hide child elements works fine, and I just added a style to make the labels display inline, so all is working great.

I just wanted to let you know so that you could consider either modifying the plugin to use the yes-its-old-but-still-semantically-correct way of keeping the labels outside of the input tags, or offer that as an option in the form’s setup – I know some people might like the label wrapping because of the ease of styling, some may choose not to so that they can base CSS styles on the state of the input.

Ross Moderator

#14270

Hey Trisha

Makes sense – I’ll take a look at this and possibly update in the next version.

Thanks

[Author]

Posts