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 operation 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 shows 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 contains 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 therefore 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"/> ...

A JavaScript custom event is fired if a `<tc:box/>` is collapsed or expanded.

`tobago.box.show` is fired before the box is expanded.

`tobago.box.shown` is fired after the box is expanded. (Does not wait for a possible Ajax reload.)

`tobago.box.hide` is fired before the box is collapsed.

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