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.


 * Due to restrictions of Shared Help, please see Help:Tab view on Wikia Help for fully working examples.

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

Help:Page for tab 1 Help:Page for tab 2 Help:Page for tab 3

This will give you:

Help:Page for tab 1 Help:Page for tab 2 Help: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 ("|"):

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

This will give you:

Help:Page for tab 1|Tab 1 Help:Page for tab 2|Tab 2 Help: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.

Help:Page for tab 1|Tab 1|false Help:Page for tab 2|Tab 2 Help: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:

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

This will give you:

Help:Page for tab 1|Tab 1 Help:Page for tab 2|Tab 2||true Help: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:

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

Apllying the tab styles
The tabs are styled by the site CSS. It has no styles or formatting by default. You may copy the following CSS (the blue tab style in Help Wikia) to your site global CSS, i.e. MediaWiki:Common.css.

If you want to change the colours or other styling, then you can add changes to your local CSS.

/* 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; }

de:Hilfe:Tab view