[Solved] Set 'Toggle Filters' only for mobile?

[BodgeIT]

Is it possible to set the filter toggle to work only when on mobile? I would like to see the filters on desktop and toggle them on mobile?

 

[genyded]

It is "possible", but what you would need to do is:

1) Create a media query for the toggle using hidden-phone or something similar. If you Google "Joomla hide on mobile" or something like that you should get a few articles on how to do that. Also none of that is Fabrik specific, just responsive Joomla stuff.
2) Either override and modify your site template and/or the Fabrik list template to house the code for the changes. You will probably need the element type and class or id, which you can get in most modern browsers by right clicking it and selecting inspect element or hitting F12 in the browser and then clicking the element.

Dale

 

[BodgeIT]

Yes i thought about that but got caught up in the PHP needed to recognise what screen resolution was active and then change the parameter for 'toggle filter' to on when in mobile view.

** Update
In the end genyded's solution was more or less what I used to achieve this.

 

[sunnyjey]

In the end genyded's solution was more or less what I used to achieve this.

I am too looking for this Mobile ONLY Toggle Change display.

Would be highly appreciated if someone share or help me to get this either through PHP or CSS.

Thank you in advance.

 

[lousyfool]

This is a 5+ years old thread but, as already indicated, a "CSS only" solution inside a media query for larger screen sizes where you hide the toggle link/button and unhide the filter container should do just fine. No need for custom template, PHP or so.

 

[sunnyjey]

Thanks. This is solved.

I just added: <a href="#" class="toggleFilters .hidden-xs"> in default_buttons.php list layout file.

 

[lousyfool]

Sure, if you're using a custom template, then this the best way: using already existing CSS by adding a class.

However, you'll want to remove the dot in front of the class name "hidden-xs".
Also:
- This class will hide the filter toggle link/button on XS screens. I thought you wanted to hide it on larger screens?
- You'll also need to add a class to the filter container to do the opposite.

 

[sunnyjey]

Yes. I made changes. It is working as intended.