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

Box

A content box is created with <tc:box/>.

Tag Library Documentation

Basics

The title of the box is set by the label attribute or with <f:facet name="label">.

<tc:box label="Box">Content</tc:box>

Box one

Title set by label attribute.

Box another

Title set by <f:facet name="label">.
Contentbox without a title.

Scrollable box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan libero orci, vel lacinia nibh tincidunt nec. Praesent in euismod eros. Phasellus suscipit purus nisl, et posuere dolor iaculis at. Vivamus fringilla risus tellus, at sollicitudin nunc egestas at. Nullam hendrerit augue id nibh pharetra maximus. Vivamus eu turpis ut ligula euismod accumsan et eget lectus. Aenean ornare elit nisl, vitae bibendum dolor egestas varius. Fusce euismod leo at tristique auctor. Donec eget luctus dui.

Collapse/Expand

A contentbox can be collapsed or expanded via the collapsed attribute. To define the behavior of hidden content, use the collapseMode attribute. For more information have a look at the Collapsible Box page in the Collapsible section.

Bar

It's possible to add a bar to the header of a content box. For that, the content box must contain the tag <f:facet name="bar">. The facet may contain <tc:bar> or other suitable tags.

Title

Box with <f:facet name="bar">.

Box in a box

Box 1

Box 2

content

Accordion

This example show collapsible/expandable boxes using the label facet.

Expanding/collapsing the first box, a full server request is executed. The other two boxes are reloaded with an ajax request.

In the collapsed form the last box only hide the content with CSS. The boxes 'Box 1' and 'Box 2' don't render the content at all.

See Collapsible Concept for more information about the collapsible concept.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
© 2005-2025 Apache Software Foundation, Licensed under the Apache License, Version 2.0.