[Resolved] View filter – hierarchical taxonomy, as an accordion, with checkboxes

[Author]

Posts

[scottB-17]

I would like to do something with Toolset that might be impossible. If I can't do it, perhaps I can come close. I seek your advice.

I have a hierarchical taxonomy, "faculties". I display its terms in a view filter, with checkboxes, so that the user can display items in one or more particular "faculties". The logic of the checkboxes is OR not AND, so the user can display items from multiple terms. The problem is that this taxonomy is growing. I would like to have the terms in an accordion, where the user can expand a section by clicking on a (displayed) parent, but I still want the logic to be OR.

That is, consider a taxonomy

Parent A
Child 1
Child 2
Parent B
Child 1
Child 2

and someone checks Parent A child 1 and Parent B child 1, the view should display items with EITHER of those terms.

I would like to do this within Toolset. Apparently I can nest child term views inside a parent view in order to only show them on a click, but I suspect that will only allow me to show a single term's items.

Perhaps I could use a view hook of some sort?

Do you know of another plugin that does this?

Any thoughts appreciated, even if the result is not exactly what I'm looking for. Thank you.

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

Your understanding is correct and since there is no built-in function available to customize the output of the terms in the view's search filter, this will require some workaround or code customizations.

Can you please share temporary admin login details, along with the link to an example page where this view can be seen? I'll be in a better position to suggest the next steps accordingly.

Note: Your next reply will be private and it is recommended to make a complete backup copy, before sharing the access details.

regards,
Waqar

[Waqar]

Thank you for sharing the admin access.

To make the child faculties term options show and hide based on the parent faculties term's selection, you can follow these steps:

1. In the view's "Custom JS" field, you can include the following custom script:

jQuery( document ).on( 'js_event_wpv_pagination_completed js_event_wpv_parametric_search_form_updated js_event_wpv_parametric_search_results_updated ready', function( event, data ) {

  jQuery("ul.categorychecklist ul.children").hide();
  jQuery("ul.categorychecklist > li").has( "ul.children" ).addClass("has-children");

  processCheckBoxes();

  function processCheckBoxes() {
    jQuery("ul.categorychecklist > li.has-children > label > input[type='checkbox']").parent("label").removeClass("is-checked");
    jQuery("ul.categorychecklist > li.has-children > label > input[type='checkbox']").parent("label").parent("li.has-children").removeClass("is-checked");

    jQuery("ul.categorychecklist > li.has-children > label > input[type='checkbox']:checked").parent("label").addClass("is-checked");
    jQuery("ul.categorychecklist > li.has-children > label > input[type='checkbox']:checked").parent("label").parent("li.has-children").addClass("is-checked");

    jQuery("ul.categorychecklist > li.has-children ul.children").hide();
    jQuery("ul.categorychecklist > li.has-children.is-checked ul.children").show();
  }
   
});

2. And in the view's "Custom CSS" field, you can include the following CSS code:

.categorychecklist > li.has-children > label.is-checked::after {
  font-weight: bold;
  content: " - ";
}

.categorychecklist > li.has-children > label:not(.is-checked)::after {
  font-weight: bold;
  content: " + ";
}

Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

[scottB-17]

Excellent. That's a great foundation for me to work from. Almost done. Now I need to eliminate the bullets before the checkboxes. I believe the bullets crept in when I set output=legacy as in [wpv-control-post-taxonomy type='checkboxes' ... output='legacy' ... ].

I tried copying partially from https://toolset.com/forums/topic/suppress-checkbox-for-parent-category-in-cred-form/ changing wpt-form-set-checkboxes to wpv-custom-search-filter__input but that didn't work. Any suggestions? Thank you.

[scottB-17]

My issue is resolved now. I managed to remove the list bullets on my own. Thank you!