This page show some examples for the collapsible concept of a Panel. 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.
immediate="true"
For the panel collapsibleMode="absent" is set. The 'Submit'-button can be executed without violation if the panel is in the hidden state.
collapsibleMode="absent"
In this example the collapsible state is changed by <tc:operation/> with full server request. So the server get the current state.
<tc:operation/>
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.
omit="true"
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.
collapsibleMode="hidden"
Here we have the transitions show and hide with AJAX request. The buttons have set immediate="true" to execute the transition without validation.
show
hide