- Components
- Accordion
Accordion
Accordion presents contents in vertical tabs.






AJAX Loading, No Auto-Open, Multiple
See Tab for documentation of item attributes.
<t:accordion>
<t:tab title="Star Wars: Episode I - The Phantom Menace">
Two Jedi Knights escape a hostile blockade...
</t:tab>
<t:tab title="Star Wars: Episode II - Attack of the Clones">
Ten years after initially meeting...
</t:tab>
<t:tab title="Star Wars: Episode III - Revenge of the Sith">
As the Clone Wars near an end...
</t:tab>
</t:accordion>
<!-- Advanced -->
<t:accordion dynamic="true" autoOpen="false" multi="true">
<t:tab>
<f:facet name="title">
Star Wars: Episode I<span class="show-for-medium"> - The Phantom Menace</span>
</f:facet>
Two Jedi Knights escape a hostile blockade...
</t:tab>
<t:tab>
<f:ajax listener="#{controller.episodeTwoActivated}">
<f:facet name="title">
Star Wars: Episode II - Attack of the Clones</span>
</f:facet>
Ten years after initially meeting...
</t:tab>
<t:tab>
<f:facet name="title">
Star Wars: Episode III - Revenge of the Sith</span>
</f:facet>
As the Clone Wars near an end...
</t:tab>
</t:accordion>
Accordion presents contents in vertical tabs.
Info
Tag name | accordion |
---|---|
Component type | io.tornadofaces.component.Accordion |
Renderer type | io.tornadofaces.component.AccordionRenderer |
Attributes
Name | Description | Required |
---|---|---|
data | Arbitrary data you can connect to your component, for example for retrieval by the configure tag or other custom business logic | false |
multi | Multi open support. If true, items will toggle open/close status when clicked, and other items are not closed when you open a new item. | false |
collapsible | Controls if it is possible to close an item without opening any other item. | false |
activeIndex | Index to open by default. If multi=true, activeIndex can be a comma separated list of indexes to open. Default 0. | false |
onItemChange | JavaScript callback to be executed when a user opens an item. The function will be called with the selected item as the only argument. | false |
widgetVar | Widget variable name, accessible via TW('widgetVar') and TornadoFaces.widgets.widgetVar. | false |
cache | If tab items are lazy loaded, cache=true will make sure each item content is only retrieved once. cache=false will retrieve and refresh the content every time the item is shown. Default true. | false |
autoOpen | AutoOpen will open the items denoted in activeIndex when the component is rendered. Default true. | false |
dynamic | Dynamic items will have it's contents lazy loaded when the item is actived. Default false. | false |
styleClass | Styles to apply to the accordion div. | false |
rendered | Should this component be rendered? | false |
Client Side Callbacks
onTabChange
is called as a tab is activated and the content is loaded.
The callback receives the item element representing the activated item.
function itemChanged(item) {
// item is the new active element
}
Ajax Behavior Events
tabChange
will be called when an tab item is toggled.
<t:accordion>
<f:ajax event="tabChange" listener="#{controller.onChange}">
</t:accordion>
public void onChange(TabChangeEvent event) {
Accordion accordion = event.getAccordion();
Tab activeTab = event.getTab();
}
The listener will be called with an instance of
io.tornadofaces.event.TabChangeEvent
that contains a reference to the new active item and the accordion.
You can also attach the ajax event
activate
to a tab, so that the listener will be executed
only when that tab is activated.activate
is the default ajax event name for tabs.
Client Side API
Widget: TornadoFaces.widget.Accordion
Method | Params | Return type | Description |
---|---|---|---|
select(index) | index: Index of the item to select | boolean | Activate or toggle the selected item. Returns true if the selected item was activated, false if it was closed. |