Extension:Tabs/Usage

This is the documentation for the Tabs extension. If this extension has been enabled, you could also copy the contents from the README.md 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.

Tabs
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 * Basic Syntax:
 * Result
 * [[File:ExtensionTab tabs.png]]

Toggle Box
A single without a parent becomes a toggle box.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 * Basic Syntax:
 * Result:
 * [[file:ExtensionTab_toggleBox.png]]

The box defaults to the open state. Add the  attribute to the tag to change the default state to collapsed: 

Dropdown Menu
A toggle box with the  attribute becomes a dropdown menu.  * Business Cards * Letterheads * Envelopes
 * Basic Syntax:
 * Result:
 * [[File:ExtensionTab dropDownClosed.png]]

Hover the mouse over the bar to open the menu:
 * [[File:ExtensionTab dropDown.png]]

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:

Hotlinking tabs
It is possible to hotlink tabs the same way as hotlinking sections on pages. Simply put the tab label in the URL, and the page will automatically scroll to the top of the tab, and open the selected tab. This will always open only the very first tab that has the specified tab label (for example, if there are two tab boxes that both have a tab labelled "Tab 1", putting  in the URL will scroll to the first one on the page). If there is already another element on the page that could be scrolled to, such as a page section, that other element will have priority, and the tab will not be focused.

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.