Help:Tabber

This extension is enabled by default on Fandom.

Tabber allows you to add multiple tabs to a section of content, which can be toggled without having to reload the page. Note that Tabbers do not work on the mobile site view. See Broken mobile experience section below.

Step-by-step[]

Open an article for editing and switch to source editor.
Copy and paste the following code into your editor.

<tabber>
|-|First Tab Title=
First tab sample text.
|-|Second Tab Title=
Second tab content goes here.
|-|Third Tab Title=
Third tab content goes here.
</tabber>

Click "Preview" to see that the code produced these tabs:

First tab sample text.

Second tab content goes here.

Third tab content goes here.

Click "Back" to return to editing.
Edit your tabs by replacing the text of the titles and content with your community's content. For example, replace "First Tab Title" with "Characters," and replace the sample text with descriptions and images of your favorite characters. You can also change the number of tabs by adding or removing code.

Complex Tabbers[]

It is possible to create Tabbers within Tabbers, using two lines of text: {{#tag:tabber| and {{!}}-{{!}}. The tag denotes a new sub-Tabber and is the sub-tab equivalent of <tabber>, functioning similarly to the Wikitext shown above this section. {{!}}-{{!}} acts as a break for the original tag and is the sub-tab equivalent of |-|, introducing the second, third, etc. sub-Tabbers. Unlike normal Tabbers, however, it does not introduce the first sub-tab. All sub-Tabbers must be closed with }} at the end of every Tabber, being the sub-tab equivalent of </tabber>.

1
2
3

Content 1

Content 2

Et cetera.

4
5
6

Content 4

Content 5

Et cetera.

Code:

<tabber>
|-|Tabber One= 
{{#tag:tabber|
1=
Content 1

{{!}}-{{!}}
2=
Content 2

{{!}}-{{!}}
3=
Et cetera.

}}
|-|Tabber Two=
{{#tag:tabber|
4=
Content 4

{{!}}-{{!}}
5=
Content 5

{{!}}-{{!}}
6=
Et cetera.

}}
</tabber>

It is also possible to add sub-Tabbers within sub-Tabbers, with the Wikitext being the same.

1
2
3

Content 1

Content 2

Content 3, et cetera.

4
5
6

Content 4

Content 5

Content 6, et cetera.

7
8
9

Content 7

Content 8

Content 9, et cetera.

Content 10

Content 11

Content 12, et cetera.

Content 13

Content 14

Content 15, et cetera.

Content 16

Content 17

Content 18, et cetera.

Code:

<tabber>
|-|Tabber One= 
{{#tag:tabber|
Sub-Tabber One=
{{#tag:tabber|
1=
Content 1

{{!}}-{{!}}
2=
Content 2

{{!}}-{{!}}
3=
Content 3, et cetera.

}}

{{!}}-{{!}}
Sub-Tabber Two=
{{#tag:tabber|
4=
Content 4

{{!}}-{{!}}
5=
Content 5

{{!}}-{{!}}
6=
Content 6, et cetera.

}}

{{!}}-{{!}}
Sub-Tabber Three=
{{#tag:tabber|
7=
Content 7

{{!}}-{{!}}
8=
Content 8

{{!}}-{{!}}
9=
Content 9, et cetera.

}}

}}
|-|Tabber Two=
{{#tag:tabber|
Sub-Tabber Four=
{{#tag:tabber|
10=
Content 10

{{!}}-{{!}}
11=
Content 11

{{!}}-{{!}}
12=
Content 12, et cetera.

}}

{{!}}-{{!}}
Sub-Tabber Five=
{{#tag:tabber|
13=
Content 13

{{!}}-{{!}}
14=
Content 14

{{!}}-{{!}}
15=
Content 15, et cetera.

}}

{{!}}-{{!}}
Sub-Tabber Six=
{{#tag:tabber|
16=
Content 16

{{!}}-{{!}}
17=
Content 17

{{!}}-{{!}}
18=
Content 18, et cetera.

}}

}}
</tabber>

Usage information[]

Formatting: Keep in mind that the title should always end with an equal sign ("="), and the tab separator ("|-|") must always appear between tabs.
Wikitext: You can use any wikitext within your tabs, including templates and images.

Styling[]

.tabber {
    /* tabber wrapper style */
}
.tabber > .wds-tab__content.wds-is-current {
    /* tabber visible content */
}
.tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab {
    /* tabber tabs */
}
.tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab > .wds-tabs__tab-label {
    /* tabber tab labels */
}
.tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab:hover {
    /* tabber tabs when being hovered */
}
.tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab > .wds-tabs__tab-label:hover {
    /* tabber tab labels when being hovered */
}
.tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab:active {
    /* tabber tabs when being clicked */
}
.tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab > .wds-tabs__tab-label:active {
    /* tabber tab labels when being clicked */
}
.tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab.wds-is-current {
    /* selected tabber tab */
}
.tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab.wds-is-current:hover {
    /* selected tabber tab when being hovered */
}
.tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab.wds-is-current:active {
    /* selected tabber tab when being clicked */
}
.tabber > .wds-tabs__wrapper > .wds-tabs__arrow-right,
.tabber > .wds-tabs__wrapper > .wds-tabs__arrow-left {
    /* tabber arrows */
}

Issues[]

Broken mobile experience[]

A lot of the CSS and JavaScript that runs on your desktop/laptop cannot be applied on a mobile device. To counter this, Fandom has removed most of that code from the mobile skin - including the stuff that makes Tabber possible. As a result, mobile users won't see any of the visual cues that separate each set of information (The contents of the tabs will appear, just not separated into tabs).

There are problems with additional CSS and HTML hacks used as workarounds, which no amount of user-facing coding can solve. Therefore, that's a lot of effort for very little gain; you might as well use ordinary sections instead.

View/Edit tab content[]

Tabber does not provide a simple way to edit individual sections. This can be troublesome for inexperienced users that want to edit the content inside a tab. Additionally, people who use the VisualEditor will be unable to edit it without switching to source editor. Section headings within tabbers would retain their edit links, but those links would never point to the intended sections. Such headings would also be prevented from appearing in the Table of Contents.

Infoboxes[]

Tabber does not always display properly when put within an infobox. To counter this, a gallery may be used within an infobox to provide the same effect as the Tabber. When using Fandom standard portable infoboxes, a gallery can be passed directly to an image field to create tabbed images. For tabbing other content, infobox panels can be used. For more information, see Help:Infoboxes.

Parsing errors[]

With the upgrade to MediaWiki 1.39 some of the internals of the wikitext parser changed. One result was that the strip markers used by the wikitext engine grew in size, causing some pages to grow beyond the previously allowed unstrip size (5 million bytes). This caused the following message to be shown:

The article has become too complex and we can't render the component in this place. Reduce the size of this article to display all components.

The growth of the size of the strip markers was especially seen in the case when strip markers were nested, as was often the case with tabbers. Especially affected were pages with tabbers or galleries inside tabbers.

Further help and feedback[]

Browse and search other help pages at Help:Contents
Check Fandom Community Central for sources of further help and support
Check Contacting Fandom for how to report any errors or unclear steps in this article

Community Central

Help:Tabber

Contents