Collapsible

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.

Visible

Content

Hidden

Content

Absent

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

collapsed

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.

collapsedMode

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.