Collapsible Panel

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.

showhideSubmitRequired

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.

showhideSubmitRequired

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.

showhideSubmitRequired

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>showhideSubmitRequired

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 collaped.

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