Help:Tabs

This is the documentation for the Tabs extension. If this extension has been enabled, you could also copy the contents from the README.txt file into a wiki page to also see live demonstrations of this extension.

Configuration
This extension has no configuration options in, but it does have the MediaWiki:tabs-dropdown-bgcolor message associated with it, which is not meant to be translated. This message contains the default value for the  style for dropdown menus. This needs to be a valid  value.

It also has the following internationalisation messages associated with it:


 * MediaWiki:tabs-tab-label - The default label for a tab. The  stands for the index of the tab.
 * MediaWiki:tabs-toggle-open - The default opening label for toggle boxes.
 * MediaWiki:tabs-toggle-close - The default closing label for toggle boxes.
 * MediaWiki:tabs-dropdown-label - The default label for a dropdown menu.

General usage information
Note: This extension uses the  attribute for dropdown menus. This is in no way meant as encouragement for the use of this deprecated attribute anywhere other than this tag.

For both the  and   tags, parser functions can be used within the content of the tag, but not in the attributes. To use parser functions within the attributes, the  or   parser functions should be used. The  parser function will also work, but since the only attributes it can define are the   and   attributes, these don't allow complete support.

For example, this will not work:

But this will work:

General attributes
The following attributes are available for both the  tag and the   tags, in any situation they're used:

Tab menu attributes
The following attributes are available for tab menus:

Toggle box attributes
or  attributes is defined, the other will take its value. If neither is defined, and the  attribute is also not defined, the default values are taken from the respective MediaWiki pages.

Tab menus
Tab menus can be used to make it possible to switch between different layouts. Anything within  tags is rendered as a tab menu. Individual tabs are then defined via a  tag.

Self-closing tabs can be used to define a list of tabs at the top of the tab menu, for later use via the  attribute. Self-closing tabs only have an effect when a name is defined, and no (valid) index is defined. The syntax for self-closing tabs is

As an alternative for the tab tag, the  parser function can also be used to simplify the syntax for tabs. The syntax for this parser function allows the following syntaxes:

Toggle box
You can create a simple collapsible box by enclosing some content between. All content within the tags will be displayed within the toggle box.

Dropdown menus
Dropdown menus are made by simply defining the  attribute on a toggle box. They can be opened by either hovering over the label, or by clicking on the label to keep it opened even after moving away the cursor. Dropdown menus have an opening delay of 0.2 seconds built in to prevent accidental opening when hovering over the label, and to prevent accidental closing when accidentally moving the cursor off the dropdown. This delay is enough to prevent accidents like those, but is not enough to be bothersome.

Dropdown menus are heavily based on the code for toggle boxes, so will also resemble them in many ways. There are a couple of quite distinct differences though.

Since dropdown menus use the  tag for their content, it is permitted to use   tags directly within the dropdown menu's contents. Any other content is also allowed.

Dropdown menus will convert all list items and links placed within to specially styled list items. The only exception is that links show as they normally do when placed within unordered lists (any line starting with). This is also the only difference between ordered and unordered lists.

Any nested lists will be rendered as sub-menus in the dropdown menu. Nested lists are created by starting a line with multiple  or   characters. There is one limitation with this however: Individual nested lists can not alternate between ordered and unordered lists. Seperate levels can, however. For example, this is not allowed: But this is:
 * Menu item 1
 * Menu item 2
 * Sub-menu item 1
 * Sub-menu item 2
 * Menu item 1
 * 1) Menu item 2
 * 2) *Sub-menu item 1
 * 3) *Sub-menu item 2
 * 4) *#Sub-sub-menu item 1
 * Menu item 3
 * Sub-menu item 1
 * Sub-sub-menu item 1

Combining tags
In most cases, it is possible to put multiple of these boxes inside each other. For this to work however, the,   or   parser functions will have to be used whenever two of the same tags are used anywhere within each other. This is required because otherwise the wikicode parser will recognise the closing tag for the nested tag as the closing tag for the outer tag, and skip the rest of the content, which could cause problems.

For the  parser function, even boolean attributes (such as   or  ) need to have a value defined for them, otherwise they are not recognised as attributes. For example,  will not work (it will show a toggle box instead of a dropdown), while   will work to show a dropdown box.

All combinations of nesting multiple tags will work, except for nesting any tab menus inside other tab menus.

Tabs Extensions Examples
This is the simplest togglebox, with just a tab tag without any attributes, surrounding this text.

Its label will switch between the value of MediaWiki:tabs-toggle-open-placeholder and MediaWiki:tabs-toggle-close-placeholder.

 Tab 1 is a named tab without specified index.  Tab 2 is a named tab, but with a specified index equal to the default 2. Tab 3 is an unnamed tab, with a specified index (4) of higher than the default (3), which makes it fall back to the name attribute's value. Its name attribute, even though it's defined, is left blank though, so it will fall back to the default, defined in MediaWiki:tabs-tab-label-placeholder. This is another tab tag, but has a specified index of 1, so this shows when tab 1 is selected  This is another tab tag, but has a specified name of equal to the second tab's ("world"), so this shows when tab 2 is selected. It also has a defined style, class, id and title attribute.  This is another tab tag, but has a specified name of equal to the third tab's ("Tab 3", the default value). This still shows when tab 3 is selected, even though tab 3 had no name specified itself.

This bottom text always shows, since it's not placed within a tab tag. This parent tabs tag is also a demonstration of the style, class and id attributes.

 This is an inline example of inline tabs, which demonstrates shows  gives you the freedom in choosing where you want to place your nested tabs.  And this part will only show for tab 3.

Look, it's multiline!

This also demonstrates that tab contents use the  style, which can be changed by either adding the inline or block attribute, and not setting its value to "false" or "0". This part also only shows for tab 3, but this has a block attribute that's not set to "false" or "0".

Note that the third tab has the default tab label. This is because a tab tag without defined name was used first, and then only after that the name was defined. It is important to define the name in the first usage of the tab, because only the name assigned to the first usage will be used.

 This togglebox demonstrates the use of openname and closename attributes, and has a collapsed attribute that's not set to "false" or "0". It also has a defined name attribute, which is not used, since the open/closename attributes are defined. This togglebox has a name, container and title attribute, as well as an index attribute. The index attribute has no purpose in unnested tab tags though, so that is ignored.

Here you can see an inline togglebox. It just shows up out of thin air! This togglebox has an inline attribute that's not set to "false" or "0".

This tabsbox has a list of tabs with a name defined earlier at the top of this tab. This is useful when making templates that might want to use tabs to switch at multiple locations within its body. Referring to the tabs can then be done simply via assigning the index attribute to it.

This text has a lot of many switching parts, which  and that makes it easier  simpler to just use the same  identical syntax everywhere  for each tab.

This togglebox's contents do allow parser functions like   to be used

This tabs tag is left without any &lt;tab&gt; tags in it. No tabs will be rendered, but the styling of the tab content will remain.

This is an example of a  tag nested inside a   tag.

This is a test of a  tag within another   tag within a   tag: