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