[Resolved] taxonomy filter label

[Author]

Posts

[horngO]

I have set up a taxonomy checkbox parametric filter

<div class="form-group">
<label class="filter-header">[wpml-string context="wpv-views"]Racks[/wpml-string]</label>
<div class="checkboxList3">[wpv-control-post-taxonomy taxonomy="racks" type="checkboxes" url_param="wpv-racks"]</div>
</div>

As you may have known, the checkboxes would only appear if the taxonomy term(s) was assigned to an item. Otherwise, the no checkboxes would appear on the front end.

My question is how would I hide the taxonomy filter label when no checkboxes are being displayed on the front end?

[Waqar]

Hi there,

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

First, if you'd like the view to keep showing all checkbox option, whether relevant results exist or not, you can select the "Always show all values for inputs" option, from the "Custom Search Settings" section.
( screenshot: hidden link )

If you'd like to only show the relevant options and would like to hide the field's label too, you'll need some custom script that can check if any checkbox elements exist under that field group and then show or hide the label, accordingly.

1. Please include a special class "checkbox-field-container' around the container div of your checkbox filter, so that:

<div class="form-group">

Becomes:

<div class="form-group checkbox-field-container">

2. In the "CSS editor" tab under the "Search and Pagination" section, please include CSS code that hides this field container, when the page loads.

.checkbox-field-container {
  display: none;
}

3. Next, in the "JS editor" tab below, also include the script that shows/hides this section, based on the availability of checkboxes fields:

function checkboxCheck() {
  if( jQuery('.checkbox-field-container input').length ){
    jQuery('.checkbox-field-container').show();
  } else {
    jQuery('.checkbox-field-container').hide();
  }
}

jQuery( document ).ready(function() {
    checkboxCheck();
});

4. If your view is set to update the results through AJAX, please also include this script function name "checkboxCheck" in the "will run after updating the results" field, so that it also executes after the results update through AJAX, without the page reload.
( screenshot: hidden link )

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar