Link to page: hidden link
I am using a solution from here: https://toolset.com/forums/topic/after-ajax-filtering-or-pagination-divs-are-open-and-not-toggled-close-anymore/
My problem:
I am using Views. I have a couple of filters in a left column that use toggles. I open a toggle and click a check box and the results display fine in the right column but the toggle that was previously open where I make the selection is now closed. I would like the state of the toggle to remain open after the right column loads with the filtered content.
Here is my filter code:
[wpv-filter-start]
<h3> [wpv-post-title] </h3>
<div class="form-group">
<div class="item-[wpv-post-id] show-hide">
<span class="plusminus">
<label for="wpv-wpcf-topic-3">[wpml-string context="wpv-views"]Topic[/wpml-string]</label>
</span>
<div class="item-content" style="display:none;">
[wpv-control-postmeta type="checkboxes" field="wpcf-topic-3" url_param="wpv-wpcf-topic-3"]
</div>
</div>
</div>
<div class="form-group">
<div class="item-[wpv-post-id] show-hide">
<span class="plusminus">
<label for="wpv-wpcf-primary-investigator2">[wpml-string context="wpv-views"]Primary Investigator[/wpml-string]</label>
</span>
<div class="item-content" style="display:none;">
[wpv-control-postmeta type="checkboxes" field="wpcf-primary-investigator2" url_param="wpv-wpcf-primary-investigator2"]
</div>
</div>
</div>
[wpv-filter-end]
Here is the JS code placed in the JS Editor:
jQuery(document).ready(function($){
//NOTE: I use "on", instead of "clic". this delegates the event
$(document).on('click','div.show-hide',function(){
$(this).find('div.item-excerpt').toggle();
$(this).find('div.item-content').toggle();
$(this).children('span.plusminus').toggleClass('open');
});
});
Here is the loop editor code:
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop wrap="1" pad="true">
[wpv-item index=1]
<div class="row ">
<div class="col-md-12">[wpv-post-body view_template="loop-item-in-test-2"]</div>
</div>
[wpv-item index=other]
<div class="col-md-12">[wpv-post-body view_template="loop-item-in-test-2"]</div>
[wpv-item index=pad]
<div class="col-md-12"></div>
[wpv-item index=pad-last]
<div class="col-md-12"></div>
</div>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-pager-nav-links output="bootstrap" first_last_links="true"]
[wpv-layout-end]
Thanks for your assistance.
Hello,
It looks like the toggle classes applied by a custom toggle system are wiped out when the filters are updated. Whenever custom search filters are updated, CSS classes and other markup you have added with JavaScript will no longer be applied because the filter template is completely rerendered with each update. Those updates could be triggered by updating the search results, or updating the filter options when "only show available options for each input" is active in Custom Search individual manual settings.
Views will trigger the custom JavaScript event js_event_wpv_parametric_search_form_updated whenever the filters are updated, so you can listen for and respond to that event with custom code. You can hook into the event with a jQuery generic event listener, like this:
jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
// place your custom code here to update toggle states for the new filters
});
If you have some additional code you'd like help troubleshooting, please let me know. I can't give you a cut-and-paste solution as per our support policy (https://toolset.com/toolset-support-policy), but I can help troubleshoot existing code that doesn't seem to work as planned. Hope this helps!
My issue is resolved now. Thank you!
