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 Sheet Sorting Paginator Sheet Column Selector Sheet Selectionchange Sheet Event Sheet Action Sheet Markup Sheet Style Empty Sheet Column Bar Sheet Filter Sheet Static Header Sheet Multi Header Sheet Tree Column Panel Sheet Editable Sheet 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 Sheet Sorting Paginator Sheet Column Selector Sheet Selectionchange Sheet Event Sheet Action Sheet Markup Sheet Style Empty Sheet Column Bar Sheet Filter Sheet Static Header Sheet Multi Header Sheet Tree Column Panel Sheet Editable Sheet 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 Panel

This page shows some examples for the collapsible concept of a Panel. Every panel contains a required input field to see if a validation occurs while submitting. For better visibility, every panel has a border.

Simple Panel

A simple panel using a controller for the collapsible state. For the 'hide'-Button, the attribute immediate="true" is set to submitting without validation. So the panel could be hidden even if the input field is empty.

For the panel collapsibleMode="absent" is set. The 'Submit'-button can be executed without violation if the panel is in the hidden state.

Full Server Request

In this example the collapsible state is changed by <tc:operation/> with full server request. So the server gets the current state.

The collapsibleMode="absent" is set. The 'Submit'-button can be executed without violation if the panel is hidden.

For the 'hide'-Button, the attribute immediate="true" is set to submitting without validation.

Client Side

A panel which is opened and closed only by the client. The attribute omit="true" is set for the 'show'-button and the 'hide'-button.

For the panel collapsibleMode="hidden" is set. After the 'hide' transition, the panel will be in the 'hidden' state - not the 'absent' state. The content of the hidden panel will also be validated.
So, if the input field is empty and the panel is hidden, a violation occurs when pressing the 'Submit'-button.

Ajax

Here we have the transitions show and hide with AJAX request. The buttons have set immediate="true" to execute the transition without validation.

The collapsibleMode="absent" is set. The 'Submit'-button can be executed without violation if the panel is hidden.

<tc:button label="show" immediate="true"> <f:ajax execute="ajaxPanel" render="ajaxPanel"/> <tc:operation name="show" for="ajaxPanel"/> </tc:button>

Events

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

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

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

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

tobago.panel.hidden is fired after the panel is collapsed. (Does not wait for a possible Ajax reload.)
© 2005-2025 Apache Software Foundation, Licensed under the Apache License, Version 2.0.