Display issues with columnToggle buttons and bootstrap styling

jackson

I want to toggle a group of columns, which are selected by class. I used the following code:

buttons: [{
      extend: 'columnToggle',
      text: 'Info',
      columns: '.col-info',
    },
    {
      extend: 'columnToggle',
      text: 'DataGroup 1',
      columns: '.col-dataGroup1',
    },
    {
      extend: 'columnToggle',
      text: 'DataGroup 2',
      columns: '.col-dataGroup2',
    },

I can show/hide the column groups, but I have an issue with columnToggle buttons and bootstrap styling:

• the state is always active, even when the columns are not shown

I used the single file CDN links.

Here is a fiddle:
https://jsfiddle.net/acjackson911/bLd00Lh5/

I tested it on the current browser versions: chromium (48) and firefox (44).