Warning! This feature is preliminary and may be subject of change in later versions!
The collapsible concept is the base for
There are four possible states - visible, hidden, absent and none.
The value 'none' deactivate this feature and is the default for #{demoBundle.box}, #{demoBundle.panel} and
#{demoBundle.section}.
The (not-'none') states are explained using the following #{demoBundle.box}es.
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 inputfield.
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 #{demoBundle.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 sided. 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.