Collapsible Section

A simple collapsible section. The collapsed attribute is set by a controller. The 'hide'-button got immediate="true" to submitting without validation.

The collapsedMode="absent" is set. The 'Submit'-button can be executed without violation if the content of section is hidden.

Submit

Collapsible Section

showhide

Required

The state is changed by <tc:operation/> with a full server request. The attribute immediate="true" is set for the 'hide'-button to change the state without validating the input field.

The collapsedMode="absent" is set. The 'Submit'-button can be executed without violation if the content of section is hidden.

Submit

Collapsible Section

showhide

Required

In this example opening and closing is done by the client. The attribute omit="true" set for the 'show'-button and the 'hide'-button to prevent submitting.

For the section collapsedMode="hidden" is set. After the 'hide' transition, the content of the section will be in the 'hidden' state. The hidden content of the section will also be validated.
If the 'Submit'-button is pressed while the input field is empty, a violation occurs.

Submit

Collapsible Section

showhide

Required

The show and hide transitions are run with an ajax request. The 'hide'-button got immediate="true" to submitting without validation.

The collapsedMode="absent" is set. The 'Submit'-button can be executed without violation if the content of section is hidden.

Submit

Collapsible Section

showhide

Required

A JavaScript custom event is fired if a <tc:section/> is collapsed or expanded.

tobago.section.show is fired before the section is expanded.

tobago.section.shown is fired after the section is expanded. (Does not wait for a possible Ajax reload.)

tobago.section.hide is fired before the section is collaped.

tobago.section.hidden is fired after the section is collapsed. (Does not wait for a possible Ajax reload.)