[Resolved] View filter toggle show hide for mobile (or any) device

[Author]

Posts

[brianC-15]

Tell us what you are trying to do?

I have many different 'views' that visitors to my website will engage with. All of them will have the option to filter results with perhaps 10 different optional filters to choose from.

When seen on a mobile having all the filter options appear first makes the results much further down the page but if I reverse the position of the filters then users will not see them to help them.

What I would like to achieve is a toggle button perhaps called 'Show filters' or 'filter results' that will allow a 'hidden panel' to float out on the screen giving the options for the viewer. but if not requested then the 'view output' will be the only visible thing seen.

Is there any documentation that you are following?

No

Is there a similar example that we can see?

Yes a website like 'Counselling Directory offers such an option

hidden link

What is the link to your site?

hidden link

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Hello. Thank you for contacting the Toolset support.

You will have to add custom jQuery/Javascript code to add toggle with the view's filters:

Please check the following related ticket that might help you:
- https://toolset.com/forums/topic/views-filter-toggle-visibleinvisible-on-mobile-devices/

[brianC-15]

Hello Minesh

Many thanks for your speedy response.

I did see that old string, and because it was 7 years ago and there was a warning that the answer may be out of date. So I made the assumption it may not work on the new toolset format.

I did what you instructed in that article ... it worked but what I want is for the initial view to be 'closed' and then when clicked can be opened.

What code do I need to add to the form ?

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

You should add the following CSS code to your view blocks "Custom JS and CSS" tabs custom CSS box to hide the filters by defult.

.wpv-filter-form {
display: none;
}

Then, you should add the following button (you cna change the caption "Filter Here" as required) using the "Fields and Text" block just after the "View Output" section. Screenshot: hidden link

You should add the following CSS code to your view blocks "Custom JS and CSS" tabs "Custom JS box that will add a toggle code to open/close the filters.

jQuery(document).ready(function($){ 
  
$(".filterbutton").click(function(){
   $('form[data-viewid=6006]').slideToggle();
   e.preventDefault();
});
 
});

Can you please confirm it works as expected at your end.

[brianC-15]

Brilliant, the filter toggle works exactly as I want it to, thanks once again, It's like having my own technical department on hand ... only faster!