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 Box

On this page the collapsible concept is explained for a Box.

Simple 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}"/>

Box

Content

Full Server Request

In this example, the operation 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"/> ...

Full Request Box 1

Content

Full Request Box 2

Content

Client Side

This example shows 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 contains 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"/> ...

No Request Box

Ajax

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

Ajax Box

Events

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

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

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

tobago.box.hide is fired before the box is collapsed.

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

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