Warning! This feature is preliminary and may be subject of change in later versions!

The collapsible concept is the base for , . , and . It determines how parts or whole components are shown or hidden. For example, a popup is hidden completely while for box only the content could be hidden.

There are four possible states - visible, hidden, absent and none.
The value 'none' deactivate this feature and is the default for box, panel and section.

The (not-'none') states are explained using the following boxes.

The 'visible' state show the content of the box like you expected.
The 'hidden' state hide the content via CSS. You can see is still in the source code. This also means that hidden content would be validated when submitted, e.g. a required input field.
The 'absent' state don't even render the content of the box.

Content

Content

Content

The state can be changed by the server with the attributes `collapsed` and `collapsedMode`.

The `collapsed` attribute is of type boolean. The default value is 'false'.

- `false` (default): The state is 'visible'.
- `true`: The state is 'hidden' or 'absent', depending on the `collapsedMode` attribute.

The attribute `collapsedMode` determine the behavior of a hidden component. Possible values are `absent` which is the default and `hidden`. It has only an effect if `collapsed="true"`.

- `absent` (default for popup): Hidden components have the state 'hidden'.
- `hidden`: Hidden components have the state 'absent'.

<tc:operation name="show|hide" for="[ID]"/>

Operations can be used to change the state client side. It can be placed within a `<tc:button/>` tag or a `<tc:link/>` tag. The name of the transition can be set in the `name` attribute. Values are 'show' and 'hide'.

- `show`: Change the state to 'visible'.
- `hide`: Set the state to 'absent' or 'hidden', depending on `collapsedMode`.

The `for` attribute has to contain the ID of the component on which the transition should be executed. Both attributes are mandatory.