How to use class="collapse" to hide search form in responsive tabular datapage

[DesiLogi]

Hi,

I've got a tabular datapage set to be responsive. Normally I use a toggle link to hide/show the Search form above the results (it's a better UX in that you can more easily style the overall page the datapage is deployed on).  However, when set to Responsive it doesn't work anymore. I've tried to use the new methods for forms but it doesn't work. 

This is what works if the datapage is not responsive: 

The link on the host html page that shows/hides the Search form: <a class="btn page-action" href="#filter" data-toggle="collapse" style="color:green;"><i class="fa fa-filter" aria-hidden="true"></i> Filters</a>

In the Search form's header: <div id="filter" class="collapse" style="text-align:left">

In the Search form's footer: </div> 

I've tried this but it doesn't work (using the same link to toggle):

In the Search form's header: <div id="filter" class="collapse" style="display:none;"><div>

In the Search form's footer: </div></div>

Does anyone know how to use "collapse" with a responsive tabular datapage's Search form? 

[futurist]

Hi @DesiLogi,

I personally havent used this, but if I may suggest something else, you can use Rules to hide a search form. You can have a Virtual Field that can be a checkbox, and if the user unchecks this checkbox, the Rule will hide all of the search fields. You may read more about Rules here: https://howto.caspio.com/datapages/forms/conditional-forms/

[DesiLogi]

Hi @futurist,

Thanks for the tip--I have used that before but it mean the show/hide toggle remains in the datapage. With the above method I can put a styled link or button on the host page to toggle show/hide, and in certain circumstances that looks/works much better for the user. I would think there's a way to tweak the ="collapse" function to make it work. If I can figure it out I'll post it for others. 

[kpcollier]

I always feel like these posts are too advanced for me, and I always share something way too simple that doesn't work. But...  

I'm not too sure what collapse does, however I think I've got an idea of it from this post.

What if you just used a simple JS function that sets the display property of the search form to none, on a click event? I'm using something like this on my webpage to pull up a submission form. The users can click the green circle button to pull up the submission form, and could click it again to hide it.  

You could run the function when the link/icon is clicked to hide the search form. When the icon is clicked again, the function sets the display value back to inline or whatever, and the search form reappears. Could place the link/icon wherever on your webpage.

[DesiLogi]

Hi @kpcollier,

It's funny but I've always gone by Occam's Razor (the simplest explanation is usually the best one). I've found at times people overcomplicate solutions whereas I really prefer the simpler, elegant ones (so long as they work). One of the signs of high intelligence is the ability to take complicated concepts and communicate them clearly and minimally. It's much easier to overcomplicate/over-communicate a simple solution, and less intelligent. This goes for code and dev solutions too, IMHO (I am no expert so I could be completely wrong). 

All of which is to say I really appreciate the solutions you post, and others like you, as they're invaluable to this platform. 

I really like the js solution here--it would do the same thing I was doing with "collapse".  How would you call the Search form in this scenario? I imagine it would be a simple .style.display = "none" line of code? 

[Kurumi]

Hi @DesiLogi- If you will use JS, yes it would be a style.display ="none" just like this sample code:

document.querySelector("input[name='cbParamVirtual1']").addEventListener('change', function() {

if (document.querySelector("input[name='cbParamVirtual1']").checked == false) {
document.querySelector("SEARCH_FORM_SELECTOR").style.display = 'none';
}

else {
document.querySelector("SEARCH_FORM_SELECTOR").style.display = 'table-cell'; // this depends on what is the right display of Search Form, you can check the CSS - sometimes this can be block
}

You can check this related forum post as well:

 

[DesiLogi]

Hi @Meekeee,

Thanks for the code--I couldn't get it work and looked at the other linked article as well. I think ultimately I'm going to use @futurist's suggestion except instead of a check box I'll use a radio button (Filter 'Show/Hide') and the Rules. I can style the radio button to look better so that'll help the UX. I think this will be the simplest solution in this case, if I can get the radio button to look right to go with the rest of the web page (that's why I was trying to find a js solution to begin with).