MediaWiki extensions manual
Release status: stable
Implementation Parser function, User interface
Description Displays top-level headers as JavaScript-based tabs
Author(s)
MediaWiki 1.28+
Database changes No
Version history
Example Wiki of the Month on semantic-mediawiki.org
Translate the Header Tabs extension if it is available at translatewiki.net
Check usage and version matrix.

The Header Tabs extension transforms top-level MediaWiki headers into tabs using the jQuery UI JavaScript library.

## Usage

To enable tabs on a page after you installed the extension, you need to add a

<headertabs />


tag into the page in place where the last tab should end (everything below this tag will be shown under the tab view). Most of the time, though, you'll want to put it at the bottom of the page.

In addition to that, the page should have top-level headers defined in it like this:

= Header title =


Each such top-level header, if it's anywhere above the <headertabs/> tag, will be displayed as a tab.

You can link to a tab, both from another page and from within that same page (and, within that same page, both from another tab and from outside the tab view). This is done using the {{#switchtablink}} parser function, which is called like this:

{{#switchtablink:Tab name|Link text|Page name}}


This will create a link to the tab with the name "Tab name", and the text of the link will read "Link text". If you want the link to a point to a tab on another page, you can optionally add the third parameter, "Page name".

Note: Multibyte characters was well as formatting characters e.g. bold is not permitted if you want to link to tabs in any way.

### Example

Some text above the tab view

This will be displayed on the first tab

This will be displayed on the second tab

This will be always displayed under the tab view
because it's below the <headertabs/> tag.


The header titles get automatically converted into tab titles.

You can also download the code directly via Git from the MediaWiki source code repository. From a command line, call the following:

git clone https://phabricator.wikimedia.org/diffusion/EHET/extension-headertabs.git


To view the code online, including the version history for each file, go here.

## Installation

• Download and place the file(s) in a directory called HeaderTabs in your extensions/ folder.
wfLoadExtension( 'HeaderTabs' );

•  Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

## Modifications

### Skin modification

To change the tabs' styling, see "Skin modification".

### Configuration parameters

The following parameters can be modified in LocalSettings.php below the require_once(...).

$wgHeaderTabsUseHistory = false;  ####$wgHeaderTabsRenderSingleTab

The $wgHeaderTabsRenderSingleTab variable defines if Header Tabs will activate if only a single top-level header is found. By default this variable is set to false, i.e. no tabs will be shown if only one top-level header is found. You can enable this behaviour by adding the following: $wgHeaderTabsRenderSingleTab = true;




#### $wgHeaderTabsDefaultFirstTab The $wgHeaderTabsDefaultFirstTab variable defines whether Header Tabs puts any content before the first defined header and put it into its own tab. By default this variable is set to false. You can enable this behavior by adding the default name using the following:

$wgHeaderTabsDefaultFirstTab = 'DefaultTabName';  If using this setting, be careful not to enable $wgHeaderTabsRenderSingleTab as it will lead to tabs appearing in other parts of the UI.

$wgHeaderTabsDisableDefaultToc = false;  ####$wgHeaderTabsGenerateTabTocs

The $wgHeaderTabsGenerateTabTocs variable defines if Header Tabs will try to generate a TOC for each tab. By default this variable is set to false, i.e. no tab TOCs will be generated. You can enable this behavior by adding the following: $wgHeaderTabsGenerateTabTocs = true;


$wgHeaderTabsEditTabLink = false;  ####$wgHeaderTabsStyle

The $wgHeaderTabsStyle variable defines what visual style is used for the tabs. By default this variable is set to 'large'. You can change the style by adding the following: $wgHeaderTabsStyle = 'style-name';


Styles included with the extension are:

Name Description Screenshot
jquery The basic styling provided by MediaWiki - it makes text smaller and links black.
large The default style. It makes the text normal-size and turns links blue (or red) again.
bare Similar formatting to the "large" style, but without most of the borders and background colors, so that the only real change to the page is the tabs themselves.
timeless More Timeless-like tabs, with normal sized text, blue links, and shiny tabs.

A wider selection of user-made styles as well as information about how to create your own styles is on our /Skin modification page.

## Version history

To see a list of changes for each version, see version history. For a list of features planned for future releases, please see roadmap.

## Known limitations and issues

• You cannot use the tag more than once. In other words, a second tag will not produce a second series of tabs.
• Tabs render on top of infoboxes in Chrome.
• Header Tabs will not work with the HTML Tidy tool, i.e. if \$wgTidyConfig is populated.

### Incompatible extensions and skins

Header Tabs does not seem to work when used alongside the following extensions:

• MathJax - when the two are used together, it leads to faulty HTML, which results in a broken display in at least the Firefox web browser. (Things might have changed as MathJax has been updated.) You can disable MathJax on specific pages by adding __NOMATHJAX__.
• AddThis (or the Widget) - only the first tab is shown
• FancyBoxThumbs - same as AddThis.
• SectionHide - incompatible due to both extensions altering section behavior. SectionHide now includes an automatic check that will inform the user that the extension does not work with Header Tabs.
• Echo - seems to cause display problems with Header Tabs.
• Tweeki - Skin Tweeki breaks the layout and hide the text of the tabs

### Sections appearing outside the tabbed section

Header Tabs sections which include floated objects (such as infoboxes) may appear outside the tabs container if other content does not force the container to be large enough to hold the floated object. One resolution to this problem is to place a cleared html element at the very end of each section. A simple, but not best-practice, means of doing this is:

<div style="clear:both"></div>


This forces this element to be considered by the browser after your floated object and thus will grow the container to fit both.

## Support

The best way to seek help with this extension is to send questions to the mediawiki-l mailing list. The extension maintainers, and active users and contributors, are on this list and will be able to help you.