Help:Tab view

Tab view gives an easy way of combining pages into one page with a tab for each sub-page. This can be an attractive and useful view for organising content.

Using tab view
To use this feature, just list the pages you want to include inside the special tabs:

Page for tab 1 Page for tab 2 Page for tab 3

This will give you:

Page for tab 1 Page for tab 2 Page for tab 3

Changing tab text
To change the text on the tabs, add a title separated from the page name with a pipe (|)

Page for tab 1|Tab 1 Page for tab 2|Tab 2 Page for tab 3|Tab 3

This will give you:

Page for tab 1|Tab 1 Page for tab 2|Tab 2 Page for tab 3|Tab 3

Disabling tab cache
If a page is showing very frequently updated information, you may want to force the tab to check for new content on each page load. This can be done with a second pipe. This should be used sparingly

Page for tab 1|Tab 1|false Page for tab 2|Tab 2 Page for tab 3|Tab 3

Preset an open tab
The last variable chooses which tab is open when the page loads. By default, all tabs are closed, but you can choose an open tab by using a third pipe

Page for tab 1|Tab 1 Page for tab 2|Tab 2||true Page for tab 3|Tab 3

This will give you:

Page for tab 1|Tab 1 Page for tab 2|Tab 2||true Page for tab 3|Tab 3

Skipping variables
As you can see in the last example, any variables you don't need can be left blank. For example, if you want to have the third tab as the active tab on page load, but not to set any other variables, you would use:

Page for tab 1 Page for tab 2 Page for tab 3|||true

Styling the tabs
The tabs are styled by the site css. If you want to change the colours or other styling, then you can add changes to your local css. The default css is:

/* TabView extension */

/*set the base backcolor of the 'off' tabs */ .yui-navset .yui-nav li { background-color: #D4DEE8; padding-left: 10px; padding-right: 10px; }

/*set the background color of the content and the 'on' tab the same*/ .yui-content, .yui-navset .yui-nav li.selected { background-color: #E7F2FF; }

/** style the 'on' tab **/ .yui-navset .yui-nav .selected { border-style: solid; border-width: 2px 0 0 0; border-top-color: #2F5DBA; }

/* keep the side padding, but enforce no gap between content area and tabs */ .yui-content { margin-top: 0; padding-top: 0.25em; padding-left: 0.5em; padding-right: 0.5em; }