How to change button text when the button hides/displays columns?

Nick Hope

Link to test case:
http://live.datatables.net/capicamo/5/edit

Description of problem:
In the above example, I have 2 buttons that hide or display 2 columns each, depending on their th class, and a 3rd button that displays all columns.

How can I change the text in those buttons from "Hide..." to "Show...", depending on the visibility of the relevant columns? It can't be done just as a simple toggle-per-click because the "Show All" button is involved too.

I have tried hard with this but can't nail it. I think I should be using some code similar to the 2 lines I have commented out, but I don't know whether to implement that within a separate function, or as a function within the text: or action: section within the button definitions.

silkspin

It can all be done in CSS. If you add new buttons in the future the code below would need to be changed because it works using the nth-child(). I've removed the "Hide" prefix from the columnToggle in your JS. Then I've added this CSS...

.dt-buttons button.dt-button.buttons-columnVisibility.active:nth-child(1) > span::before {
  content: "Hide ";
}

.dt-buttons button.dt-button.buttons-columnVisibility:nth-child(1) > span::before {
  content: "Show ";
}

.dt-buttons button.dt-button.buttons-columnVisibility.active:nth-child(2) > span::before {
  content: "Hide ";
}

.dt-buttons button.dt-button.buttons-columnVisibility:nth-child(2) > span::before {
  content: "Show ";
}

http://live.datatables.net/capicamo/6/edit

Nick Hope

Thank you very much @silkspin. I didn't think to do it just with css.

In my real application I have classes on the individual buttons so I was able to use a much shorter css selector for them.