[Resolved] Keep show/hide div open after Ajax search update?

[Author]

Posts

[bobA-2]

I thought about doing the front end search filter section as a show and hide. I put in a show/hide div and using the code at the bottom of this post. But the div.item-content hides when I do change anything in the front end search filter (AJAX results update when visitors change any filter values)

Is there some code I could add to keep it open after the AJAX results update?

jQuery(document).ready(function($){
    $(document).on('click','div.show-hide',function(){
        $(this).find('div.item-content').toggle();
        $(this).children('span.plusminus').toggleClass('open');
    });
});

[Luo Yang]

Dear Bob,

Please try to modify your JS codes as below, and test again:

function scroll_to_top(){
  jQuery(document).ready(function($){
    $(document).on('click','div.show-hide',function(){
        $(this).find('div.item-content').toggle();
        $(this).children('span.plusminus').toggleClass('open');
    });
  });
}
  
jQuery( document ).on('js_event_wpv_parametric_search_results_updated', function( event, data ) { // when ajax search is completed
  scroll_to_top();
});
scroll_to_top();

[bobA-2]

Hi Luo,

Only change with the code you suggested is that show/hide does not work after the first time a filter is set. I can show/hide with my initial code.

I have made a test view here : hidden link

[Luo Yang]

Since it is a custom JS codes problem, please provide the credentials of your test site in below private detail box, I need to test and debug it in a live website, thanks

[Luo Yang]

Thanks for the details, I have modified the JS codes as below:

function toggle_div(){
    jQuery('div.show-hide').click(function(e){
      console.log(jQuery(this).find('div.item-content'));
        jQuery('div.item-content').toggle();
        jQuery(this).children('span.plusminus').toggleClass('open');
    });
}

jQuery(document).ready(function($){
	toggle_div();
});

Please test again, check if it is fixed or not, thanks

[bobA-2]

Thanks Luo. Does the search filter stay open for you now on the test page after you change a filter? Does not for me and that was what I aimed for. If I change a filter I still have to click the Click here to Filter by Categories again every time.

[Luo Yang]

You can add below JS codes to hide the DIV by default:

jQuery( document ).on('js_event_wpv_parametric_search_results_updated', function( event, data ) { // when ajax search is completed
   jQuery('div.show-hide').find('div.item-content').hide();
});

See the result:
hidden link

[bobA-2]

Thanks