Tobago Demo

Menu

Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Offcanvas Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sorting Paginator ColumnSelector Events Selection change event Action Markup Style Empty sheet Column Bar Filtering Static header Multi header Sheet Tree ColumnPanel Editable Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta
Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Offcanvas Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sorting Paginator ColumnSelector Events Selection change event Action Markup Style Empty sheet Column Bar Filtering Static header Multi header Sheet Tree ColumnPanel Editable Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta

Collapsible Section

Collapsible concept explained for a Section.

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

Collapsible Section

Full Server Request

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.

Collapsible Section

Client Side

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.

Collapsible Section

Ajax

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.

Collapsible Section

Events

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

© 2005-2025 Apache Software Foundation, Licensed under the Apache License, Version 2.0.