Collapsible Box

This is a simple collapsible box which open and close the content via a controller.

In this example, the operaction tag is used to change the state of the boxes.

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.

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'.