Help:Tab view


 * Reading Tip: If the examples below are not fully loading, please visit the source of this page, Help:Tab view on Wikia Help on Help Wiki.

Tab view provides an easy way to display multiple content pages in a single article using tabs. This can be an attractive and useful view for organizing content.

For a similar extension that doesn't require multiple pages, see Tabber.

Step-by-Step

 * First, you need to create a page of content for each tab you wish to display. These pages can be created anywhere on your wiki.


 * In this example, we've created three subpages to this article, which we will use in our tabs below. They are titled:
 * Help:Tab view/Sample tab content 1
 * Help:Tab view/Sample tab content 2
 * Help:Tab view/Sample tab content 3


 * Open the page that you'd like to display tabs on for editing, and switch to source mode.


 * Enter your tab code in the following format:

PAGENAME1|TITLE1 PAGENAME2|TITLE2 PAGENAME3|TITLE3

So, in our example here, we'll enter:

Help:Tab view/Sample tab content 1|Tab 1 Help:Tab view/Sample tab content 2|Tab 2 Help:Tab view/Sample tab content 3|Tab 3

This will give us the following tabs:

Help:Tab view/Sample tab content 1|Tab 1 Help:Tab view/Sample tab content 2|Tab 2 Help:Tab view/Sample tab content 3|Tab 3

Customization
In addition to the title, there are two other variables you can customize in your tabs:


 * Cache
 * Preset

We'll explain each of these below. They display in this order:

PAGENAME|TITLE|CACHE|PRESET

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, followed by the word "false." This should be used sparingly, however, as it can slow down the overall reading experience.

Help:Tab view/Sample tab content 1|Tab 1|false Help:Tab view/Sample tab content 2|Tab 2 Help:Tab view/Sample tab content 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 followed by the word "true":

Help:Tab view/Sample tab content 1|Tab 1 Help:Tab view/Sample tab content 2|Tab 2||true Help:Tab view/Sample tab content 3|Tab 3

This will give you:

Help:Tab view/Sample tab content 1|Tab 1 Help:Tab view/Sample tab content 2|Tab 2||true Help:Tab view/Sample tab content 3|Tab 3

Parameters
The only parameters available in tabview is "title" and "id". You cannot customize each tabview in the page. Currently it has to be done via site CSS. The parameters are:

Styling
Once you have set an id, you can modifine every tab. For example id = Example

Styling the tabs via CSS
Tab view has default styles and formatting provided automatically, but it can also be given a custom style through CSS. You may copy the following CSS (the blue tab style as seen on Wikia Help) to your site's global CSS, i.e. MediaWiki:Common.css (or MediaWiki:Wikia.css for the new default-wikia skin). You can adjust the values in the example below to create a unique color scheme and layout for the tabs.

/*** TabView extension ***/

/* Style of all unselected tabs */ .yui-navset .yui-nav li { -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; background-color: #D9D9D9; color: #3A3A3A; font-size: 12px; margin-top: 7px; padding: 6px 20px 3px; } /* END Style of all unselected tabs */

/* Style of the selected tab */ .ui-tabs .ui-tabs-nav li.ui-tabs-selected a { background-color: #7FB5D7; color: white; font-weight: bold; } /* END Style of the selected tab */

/* Padding between tabs */ .ui-tabs .ui-tabs-nav li { margin: 0 0.2em 1px 0; padding: 0; } /* END Padding between tabs */

/* Remove the border & space between tabs & content */ .ui-tabs .ui-tabs-nav {   border-bottom: 0 none; margin-bottom: 0; } /* Remove the border & space between tabs & content */

/* Background color and border of tab content */ .ui-tabs .ui-tabs-panel {   background: none repeat scroll 0 0 white; border: 2px groove gray; } /* END Background color and border of tab content */