Collapse All / Show All as one toggle-button

Seesicht-IT

Hi,

I am using SearchPanes with Bootstrap 4. As a default, there are two buttons for showing / collapsing all SearchPanes at the top.

I already changed the text of "showMessage" and "collapseMessage" with some font-icon-code within the i18n configuration. I created demo here:
live.datatables.net/zumihuki/1/edit

As my SearchPanes column is rather narrow, I'd like to replace those two buttons with just one icon-button that toggles all SearchPanes, similar to the toggle button on the control of each pane.

Is there a way to achieve this?

Thanks for any suggestions!

Jan

allan

Hi Jan,

Not with Javascript, but it can be done with a single CSS statement:

div.dtsp-panes button[disabled=disabled] {
  display: none;
}

http://live.datatables.net/zumihuki/3/edit

Allan

Seesicht-IT

Hi Allan,

thanks for your help! I first thought that it works as described, but I noticed that if I open one pane, then there is an additional button show at the top.

Is it possible to fix this as well?

Jan

colin

That is displayed as it'll collapse all the panes when pressed. Do you want that button to never be displayed? Or what would you prefer to happen?

Colin

Seesicht-IT

Hi Colin,

That is a good question

I realized that the "showAll" button get's disabled as soon as all panes are open. So it is actually really smart! Unfortunately I don't have the space for all those buttons...

Is it possible to do the following?
1. As long as all panes are collapsed, the showAll button should be displayed and the collapseAll should be hidden.
2. As soon as one pane is open / shown, the showAll button should be hidden and the collapseAll should be shown.

For case 1 showAll is enabled and collapseAll is disabled.
For case 2 showAll is enabled and collapseAll is enabled as well. In this case, showAll should be display:none.
For case 3 (all panes are open) showAll is disabled and collapseAll is enabled.

Case 1 and 3 already work fine with the CSS of Allan. So we "only" have to find a trick for case 2.

Thanks!

Jan

Seesicht-IT

I did some further testing / understanding.

The buttons are in this order in the code:
1. clearAll
2. showAll
3. collapseAll

When using this CSS

button.dtsp-showAll[disabled=disabled], button.dtsp-collapseAll[disabled=disabled] {
    display: none;
}
button.dtsp-showAll:not([disabled=disabled]) + button.dtsp-collapseAll:not([disabled=disabled]) {
    display: none;
}

I can set "display:none" for the collapseAll button, but in case 2 of my previous post, I actually want to set "display:none" for the showAll button.

Any ideas on how I can accomplish this?

Seesicht-IT

OK, the only solution I can come up with is this:

Set the CSS like this:

button.dtsp-showAll[disabled=disabled], button.dtsp-collapseAll[disabled=disabled] {
    display: none;
}
button.dtsp-collapseAll:not([disabled=disabled]) + button.dtsp-showAll:not([disabled=disabled]) {
    display: none;
}

And put this into the initComplete function of the SearchPanes to set the buttons in the right order in the code:

initComplete: function () {
    $('button.dtsp-showAll').insertAfter('button.dtsp-collapseAll');
},

I don't know, if there is a more elegant way of doing this... Seems like hacking / spaghetti-code

colin

You could use a standard jQuery click event handler perhaps to add different classes to those buttons which determine their visibility, may be simpler.

Colin