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

A simple panel using an controller for the collapsible state. For the 'hide'-Button is the attribute `immediate="true"` set to submitting without validation. So the panel could be hide 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 get 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 occur 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>