ScriptAction TabPanel

In this example we will create a simple tab panel which takes advantage of the ShowItem action.

The basic structure is pretty easy: Three groups with the content and three other groups above with the tab-selector. In this example there are just simple images but there are no limits defined which content to choose.

Now lets assign each small picture a ShowItem action and define each content group a CSS class name to identify them. You may notice that the ShowItem action owns a "hide class prefix" - this parameter will be used to hide all items whose CSS class starts with the value you defined. In our example it's "tab".

Now we can see the result below:

We can also add some more groups with CSS classes to even enable the active panel to be identified. And to show more possibilities lets simply switch the layout to a horizontal one.