A few years ago, Shane assisted me with the Bootstrap accordion solution and AJAX filter events. The issue was that using filters collapsed the Bootstrap accordion after filter updates. The snippet works nicely and I am very thankful for it:
jQuery( "#filter-button").click(function() {
if(window.state === undefined){
window.state = true
}
else{
window.state = !window.state
}
});
jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
* data.view_changed_form (object) The jQuery object for the View form after being updated
* data.view_changed_form_additional_forms_only (object) The jQuery object containing additional forms from other instances of the same View inserted using the [wpv-form-view] shortcode
* data.view_changed_form_additional_forms_full (object) The jQuery object containing additional forms from other instances of the same View inserted using the [wpv-view] shortcode
*/
if (window.state === true){
jQuery('.collapse').collapse('show');
}
else{
jQuery('.collapse').collapse('hide');
}
jQuery( "#filter-button").click(function() {
if(window.state === undefined){
window.state = true
}
else{
window.state = !window.state
}
});
});
I have realized recently that there is an elegant and very simple HTML solution for accordions, which has several advantages: using <details><summary> elements. Browser support is very good:
hidden link
However, there is of course the same issue that the accordions close after filter updates... I tried to adapt the snippet but I failed...
I would be very grateful if you could assist me.
Here is an example site that uses several <details><summary> accordions and another WordPress AJAX filtering plugin:
hidden link
The accordions work very nicely and don't use Bootstrap, but pure HTML... I just can't figure out how they prevent accordion collapsing after filter updates.
