On this page the collapsible concept is explained for a
This is a simple collapsible box which open and close the content via a controller.
<tc:button label="show" immediate="true"
action="\#{collapsibleBoxController.showCollapsed1}"/>
In this example, the operaction tag is used to change the state of the boxes.
<tc:box id="box1" label="Full Request Box 1" collapsedMode="absent">
<f:facet name="bar">
<tc:buttons>
<tc:button label="show">
<tc:operation name="show" for="box1"/>
...
This example show a content box which could be opened and closed without a server request.
To render the hidden content of the box, collapsedMode="hidden"
must be set.
The content is hidden by CSS display property.
Also the content contain a required inputfield.
This field will be also validated if the content is hidden.
To demonstrate that, leave the inputfield blank, hide the content and press the 'Submit'-button.
Notice the omit
attribute of the buttons is set to avoid server request.
<tc:box id="noRequestBox" label="No Request Box"
collapsed="true" collapsedMode="hidden">
<tc:button label="show" omit="true">
<tc:operation name="show" for="noRequestBox"/>
...
Here we have the transitions show
and hide
with AJAX request.
The buttons have set omit="false"
which is the default.
Also the attribute immediate="true"
is set to execute the transition without validation.
The mode is set to collapsedMode="absent"
(default), so the hidden content won't be rendered
and therefor not validated.
You can press the 'Submit'-button after hiding the blank inputfield. The submit will be executed without validation. If the content is shown and the field is empty, a violation occurs after hitting 'Submit'.
<tc:box id="ajaxBox" label="Collapsible Box (AJAX)" collapsedMode="absent">
...
<tc:button label="show" immediate="true">
<f:ajax execute="ajaxBox" render="ajaxBox"/>
<tc:operation name="show" for="ajaxBox"/>
...