It configures a set of elements to act as a kind of accordion. There are some elements that behave as tabs and, some others that act as tabs content. Every tab element has a tab content element so that, when one of them is clicked, its corresponding content is displayed and any other becomes hidden.
Attribute name | Description | Default | Required | Valid values |
selectedTabClass | CSS class of the tab that is the active one (only one can be active at one time). | false | ||
selectedTabId | Identifier of the tab that will be active when the page is loaded. The tab content related to it, will be displayed as well. If not set, no tab content will be displayed. | false | ||
tabsIds | Identifiers of the tabs. The ones that will be visible always. | true | a String representing a JavaScript-like array. i.e. ['tab1', 'tab2'] | |
tabsContentIds | Identifiers of the tabs content. Only one tab content is shown at one time. Such an element will depend on the clicked shooterId element | true | a String representing a JavaScript-like array. i.e. ['tabContent1', 'tabContent2'] | |
effect | The kind of effect being fired on the tab content to display it when a tab is clicked. | appear | false | appear, slideDown, blindDown |
duration | Duration of the effect being performed on a tab content whenever that tab is clicked. | 0 | false | float |
Note: all of the attributes accept runtime expressions.
Go here to see an example.