Hi,
thanks for your post, and sorry for the trouble.
To achieve this, you would need to use some small JavaScript code, which can then handle the click on the button and perform an action (toggle the visibility of the ColumnFilterWidgets). (This JS code will then internally apply the CSS code that you found.)
As a start, the “toggle” section on https://www.w3schools.com/jquery/jquery_hide_show.asp might help.
Regards,
Tobias
Hi, Tobias!
I’m struggling a bit with this. 😉
I tried out one of the scripts on the page you linked to, this one:
——————————————————————————-
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).toggle();
});
});
</script>
<button>Toggle between hiding and showing the paragraphs</button>
——————————————————————————-
I pasted the code into a custom HTML field in my page builder. When I clicked the button, all the text inside the table that was wrapped in <p></p> became hidden. So the code worked.
However, I can’t make the code hide/show the column filter widgets. I assume I’m referencing them incorrectly. For example, I tried replacing the “p” in
$(“p”).toggle();
with “column-filter-widgets”.
It didn’t work. What am I doing wrong? Any ideas?
Hi,
almost 🙂 Please try
$(".column-filter-widgets").toggle();
You are basically “selecting” a CSS class here, indicated by the . in front of column-filter-widgets.
Also, please change
$(document).ready(function(){
to
jQuery(document).ready(function($){
which makes the code a bit more robust. In addition, it might then be possible to remove the line
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
as the jQuery JS library might already have been loaded by another plugin or your theme.
Regards,
Tobias
That worked! Thanks, Tobias!! 🙂
Hi,
no problem, you are very welcome! 🙂 Good to hear that this helped!
Best wishes,
Tobias
P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!
