Search filters on mobile screen

This support ticket is created 4 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-	-	9:00 – 13:00
14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-	-	14:00 – 18:00

Supporter timezone: Africa/Casablanca (GMT+01:00)

This topic contains 1 reply, has 2 voices.

Last updated by Jamal 4 years, 1 month ago.

Assisted by: Jamal.

Author

Posts

March 14, 2021 at 2:31 pm #1985693

jimmyS

do i best place search filters on mobile view? We have around 20 filters, and we are looking for a way improve user experience on mobile.

hidden link
To see what I mean

We thought best would be to have a toggle on mobile, sliding in filters from the side, or via pop-up
I also thought that an accordion may work, however the button "clear all filters" doesnt function as expected when using the accordion.

March 14, 2021 at 3:48 pm #1985727

March 19, 2021 at 10:52 am #1993331

Jamal

Hello there!

Our 2nd Tier has suggested to use the following code, I hope it will work for all the devices and screens:

document.addEventListener("DOMContentLoaded", function(){
    
    jQuery(document).on('js_event_wpv_parametric_search_form_updated js_event_wpv_parametric_search_results_updated', function (event, data) {
    
        jQuery('.ugb-accordion__heading').on('click', function (event, data) {
            var aria = jQuery(this).closest('.wp-block-ugb-accordion').attr('aria-expanded');
            jQuery(this).closest('.wp-block-ugb-accordion').toggleClass('ugb-accordion--open');
            jQuery(this).closest('.wp-block-ugb-accordion').attr('aria-expanded', aria ? 'false' : 'true');
        });
    });
});

Please try it in the view and let us know if it helps.