Accordion

Accordion presents contents in vertical tabs.

Star Wars: Episode I - The Phantom Menace

Two Jedi Knights escape a hostile blockade to find allies and come across a young boy who may bring balance to the Force, but the long dormant Sith resurface to reclaim their old glory.

Star Wars: Episode II - Attack of the Clones

Ten years after initially meeting, Anakin Skywalker shares a forbidden romance with Padmé, while Obi-Wan investigates an assassination attempt on the Senator and discovers a secret clone army crafted for the Jedi.

Star Wars: Episode III - Revenge of the Sith

As the Clone Wars near an end, the Sith Lord Darth Sidious steps out of the shadows, at which time Anakin succumbs to his emotions, becoming Darth Vader and putting his relationships with Obi-Wan and Padme at risk.

Star Wars: Episode I - The Phantom Menace

Two Jedi Knights escape a hostile blockade to find allies and come across a young boy who may bring balance to the Force, but the long dormant Sith resurface to reclaim their old glory.

Star Wars: Episode II - Attack of the Clones

Star Wars: Episode III - Revenge of the Sith

AJAX Loading, No Auto-Open, Multiple

Star Wars: Episode I - The Phantom Menace

Star Wars: Episode II - Attack of the Clones

Star Wars: Episode III - Revenge of the Sith

See Tab for documentation of item attributes.

Example

Documentation

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