This page shows some examples for the collapsible concept of a . Every panel contains a required input field to see if a validation occurs while submitting. For better visibility, every panel has a border.

A simple panel using a controller for the collapsible state. For the 'hide'-Button, the attribute `immediate="true"` is set to submitting without validation. So the panel could be hidden even if the input field is empty.

For the panel `collapsibleMode="absent"` is set. The 'Submit'-button can be executed without violation if the panel is in the hidden state.

In this example the collapsible state is changed by `<tc:operation/>` with full server request. So the server gets the current state.

The `collapsibleMode="absent"` is set. The 'Submit'-button can be executed without violation if the panel is hidden.

For the 'hide'-Button, the attribute `immediate="true"` is set to submitting without validation.

A panel which is opened and closed only by the client. The attribute `omit="true"` is set for the 'show'-button and the 'hide'-button.

For the panel `collapsibleMode="hidden"` is set. After the 'hide' transition, the panel will be in the 'hidden' state - not the 'absent' state. The content of the hidden panel will also be validated.
So, if the input field is empty and the panel is hidden, a violation occurs when pressing the 'Submit'-button.

Here we have the transitions `show` and `hide` with AJAX request. The buttons have set `immediate="true"` to execute the transition without validation.

The `collapsibleMode="absent"` is set. The 'Submit'-button can be executed without violation if the panel is hidden.

<tc:button label="show" immediate="true"> <f:ajax execute="ajaxPanel" render="ajaxPanel"/> <tc:operation name="show" for="ajaxPanel"/> </tc:button>

A JavaScript custom event is fired if a `<tc:panel/>` is collapsed or expanded.

`tobago.panel.show` is fired before the panel is expanded.

`tobago.panel.shown` is fired after the panel is expanded. (Does not wait for a possible Ajax reload.)

`tobago.panel.hide` is fired before the panel is collapsed.

`tobago.panel.hidden` is fired after the panel is collapsed. (Does not wait for a possible Ajax reload.)