Only show children of checked parent categories?

Anonymous

#209369

Hi there,
Thank you for building a great plugin. It’s great for me so far. One question for you. Assuming I have categories like this:

Parent A
-child A1
-child A2
-child A3
Parent B
-child B1
-child B2
-child B3
Parent C
-child C1
-child C2
-child C3

Showing the full hierarchy in the filter takes up a lot of UI real estate.
What I would like to do is ONLY show the children of parent categories whose boxes are checked. So you might see:

Parent A <checked>
-child A1
-child A2
-child A3
Parent B <unchecked>
Parent C <checked>
-child C1
-child C2
-child C3

If the user checks parent B and unchecks A & C it would look like this:

Parent A <unchecked>
Parent B <checked>
-child B1
-child B2
-child B3
Parent C <unchecked>

Is there a conditional hierarchy setting I am missing somewhere? This would really help me keep the UI efficient on space.

Thanks!

Alice

Anonymous

#209370

It would also be nice to have the search field itself have a show/hide arrow icon on the right to reveal the checkbox options within or hide them accordion style, just as you have in the admin ui for the fields and their options.

Any settings or code snippets to help with either of these? Both are aimed at better user experience (speed to content + managing the screen real estate).

Thanks,

Alice

Trevor

#209388

Hi Alice. With regard to the first question (hiding children of unselected parents), this MIGHT be possible with custom CSS, but I would need a live link/URL to your search page so I can take a look and test using the browser developer tools.

As to the latter (arrow) question, that might be possible with custom javascript, but I have no snippets that I have tested. I am fairly sure I have seen a user post such a snippet a few months ago, but I cannot find it, sorry.

Anonymous

#209453

This reply has been marked as private.

Trevor

#209507

Can you see if this custom CSS works:

.searchandfilter .sf-option-active ul.children {
    display: block;
}
.searchandfilter ul.children {
    display: none;
}

Anonymous

#209593

It works! Thank you so much.

[Author]

Posts