Collapsible Box

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 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 therefor 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"/>
    ...