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 input field. This field will be also validated if the content is hidden.
To demonstrate that, leave the input field 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 input field. 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"/> ...