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

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
NameDescriptionRequired
dataArbitrary data you can connect to your component, for example for retrieval by the configure tag or other custom business logic false
multiMulti 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
collapsibleControls if it is possible to close an item without opening any other item.false
activeIndexIndex to open by default. If multi=true, activeIndex can be a comma separated list of indexes to open. Default 0. false
onItemChangeJavaScript callback to be executed when a user opens an item. The function will be called with the selected item as the only argument.false
widgetVarWidget variable name, accessible via TW('widgetVar') and TornadoFaces.widgets.widgetVar. false
cacheIf 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
autoOpenAutoOpen will open the items denoted in activeIndex when the component is rendered. Default true. false
dynamicDynamic items will have it's contents lazy loaded when the item is actived. Default false. false
styleClassStyles to apply to the accordion div.false
renderedShould 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.