Tell us what you are trying to do? Want to hide all ELA, Math, and Science curriculum field options class="subject-options" until a wpv-wpcf-type checkbox is selected then show the additional filters based on the subject selection. Could show 1-3 options depending on # of checkboxes checked. What I have below works for a second but as soon as the results load it hides the subject-options again.
I have this code in the JS editor for the search and pagination section:
( function( $ ) {
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
var val = $(this).attr("value");
$("." + val).toggle();
});
});
})( jQuery );
CSS editor:
.subject-options{
display:none;
}
Under Pagination and Slider settings: I've tried adjusting how the results are updated (AJAX, manual, etc.) and the adjusting URLs after load or not and neither of those made a difference.
Thank you for getting in touch. I believe the issue here is that you need to use the callback function for the JS to ensure that function triggers to fields to remain open.
var atLeastOneIsChecked = $('#checkArray:checkbox:checked').length > 0;
jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
* data.layout (object) The jQuery object for the View layout wrapper
*/
( function( $ ) {
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
var val = $(this).attr("value");
$("." + val).toggle();
});
});
})( jQuery );
CSS editor:
.subject-options{
display:none;
}
});
However you will need to modify the function to check if the field has a value selected rather than if it is clicked, so when the page refreshes the function checks and enables the other fields.
I'm not able to get that working. I'm also not sure what your comments mean. The code below works if the checkbox is already checked then the page is refreshed. But doesn't work as items are checked. I'm a novice with JQuery. Can you please advise?
Would you mind allowing me to have admin access to the site so that I can see if I can provide a solution for this ?
I have an idea of using your browser's localstorage to store the selected value and retrieve the value after the page refreshes so that we can know which fields were selected.
I've enabled the private fields for your next response.
Thanks,
Shane
Thank you for taking a look. It's close. When Subject: English Language Arts is checked, the correct option shows. When Math is also checked the English options hide and Math are shown. Both should show. If all three are checked in order--then Science is checked--Science still shows. In this case, only English and Math should show. How do we get more than one option to show at a time and for the options to hide when subjects are unchecked?
