Changes: Help:Tabber

Revision as of 02:44, 5 January 2020

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.

Step-by-step

Open an article for editing and switch to Source mode.
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.

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.

Nesting Tabber

While it may not be appealing to the eye, Tabber is actually capable of being nested multiple times, allowing variable content to be delivered to a user based on their input/selections.

"Sub-Tabbers" may be added within a tab by rewriting:

<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>

as the following:

{{#tag:tabber|First Tab Title=First tab sample text.
{{!}}-{{!}}Second Tab Title=Second tab content goes here. 
{{!}}-{{!}}Third Tab Title=Third tab content goes here.
}}

Result:

First tab sample text.

Second tab content goes here.

Third tab content goes here.

Any Vertical Bars "|" inside a "#tag" Tabber beyond the one immediately after the word "tabber", must be replaced with "{{!}}" or Tabber will malfunction. Pages may be embedded in and some templates which have no parameters may be used within a "Sub-Tabber".

As a rather complex example, the following code:

<tabber>
Tab A = {{#tag:tabber|Sub-tab 1 = {{#tag:tabber|Super-sub-tab a = A1a {{NaughtyDogFooter}}
{{!}}-{{!}} Super-sub-tab b = A1b
{{!}}-{{!}} Super-sub-tab c = A1c
}}
{{!}}-{{!}} Sub-tab 2 = {{#tag:tabber|Super-sub-tab a = A2a
{{!}}-{{!}} Super-sub-tab b = A2b
{{!}}-{{!}} Super-sub-tab c = A2c
}}
{{!}}-{{!}} Sub-tab 3 = {{#tag:tabber|Super-sub-tab a = A3a
{{!}}-{{!}} Super-sub-tab b = A3b
The "b" Tertiary Tag, beneath the "3" Secondary Tag, beneath the "A" Primary Tag.
{{!}}-{{!}} Super-sub-tab c = A3c
}}
}}
|-|
Tab B = {{#tag:tabber|Sub-tab 1 = {{#tag:tabber|Super-sub-tab a = B1a
{{!}}-{{!}} Super-sub-tab b = B1b
{{!}}-{{!}} Super-sub-tab c = B1c
}}
{{!}}-{{!}} Sub-tab 2 = {{#tag:tabber|Super-sub-tab a = B2a
The "a" Tertiary Tag, beneath the "2" Secondary Tag, beneath the "B" Primary Tag.
{{!}}-{{!}} Super-sub-tab b = B2b
{{!}}-{{!}} Super-sub-tab c = B2c
}}
{{!}}-{{!}} Sub-tab 3 = {{#tag:tabber|Super-sub-tab a = B3a
{{!}}-{{!}} Super-sub-tab b = B3b
{{!}}-{{!}} Super-sub-tab c = B3c
}}
}}
|-|
Tab C = {{#tag:tabber|Sub-tab 1 = {{#tag:tabber|Super-sub-tab a = C1a
{{!}}-{{!}} Super-sub-tab b = C1b
{{!}}-{{!}} Super-sub-tab c = C1c
The "c" Tertiary Tag, beneath the "1" Secondary Tag, beneath the "C" Primary Tag.
}}
{{!}}-{{!}} Sub-tab 2 = {{#tag:tabber|Super-sub-tab a = C2a
{{!}}-{{!}} Super-sub-tab b = C2b
{{!}}-{{!}} Super-sub-tab c = C2c
}}
{{!}}-{{!}} Sub-tab 3 = {{#tag:tabber|Super-sub-tab a = C3a
{{!}}-{{!}} Super-sub-tab b = C3b
{{!}}-{{!}} Super-sub-tab c = C3c
}}
}}
</tabber>

Results in the following output:

A1a

Crash Bandicoot • Jak and Daxter • The Last Of Us • Uncharted

A1b

A1c

A2a

A2b

A2c

A3a

A3b The "b" Tertiary Tag, beneath the "3" Secondary Tag, beneath the "A" Primary Tag.

A3c

B1a

B1b

B1c

B2a The "a" Tertiary Tag, beneath the "2" Secondary Tag, beneath the "B" Primary Tag.

B2b

B2c

B3a

B3b

B3c

C1a

C1b

C1c The "c" Tertiary Tag, beneath the "1" Secondary Tag, beneath the "C" Primary Tag.

C2a

C2b

C2c

C3a

C3b

C3c

Styling

.tabberlive {
    /* tabber wrapper style */
}
.tabberlive > .tabbertab:not(.tabbertabhide) {
    /* tabber visible content */
}
.tabberlive > .tabbernav > li > a {
    /* tabber tabs */
}
.tabberlive > .tabbernav > li > a:hover {
    /* tabber tabs when being hovered */
}
.tabberlive > .tabbernav > li > a:active {
    /* tabber tabs when being clicked */
}
.tabberlive > .tabbernav > li.tabberactive > a {
    /* selected tabber tab */
}
.tabberlive > .tabbernav > li.tabberactive > a:hover {
    /* selected tabber tab when being hovered */
}
.tabberlive > .tabbernav > li.tabberactive > a:active {
    /* selected tabber tab when being clicked */
}

Issues

Broken mobile experience

A lot of the CSS and JavaScript that runs on your desktop/laptop cannot 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.

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 view/edit the original page. 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 mode.

Tab titles that match section titles

If one of the tab titles matches a section title on the same page, clicking on that tab will also send you to that section on the page (similar to clicking on a section in the Table of Contents).

For this reason, try to avoid tab names that match page sections. You can see this in action here:

Clicking this tab will take you to the 'Issues' section above.

Clicking this tab will simply switch tab.

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

@@ Line 57: / Line 57: @@
 }}</div>
-Any Vertical Bars "<nowiki style="margin: 20px;">|</nowiki>"  inside a "#tag" Tabber must be replaced with "<nowiki>{{!}}</nowiki>" or Tabber will malfunction.
+Any Vertical Bars "<nowiki style="margin: 20px;">|</nowiki>"  inside a "#tag" Tabber beyond the one immediately after the word "tabber", must be replaced with "<nowiki>{{!}}</nowiki>" or Tabber will malfunction.
 Pages may be embedded in and some templates which have no parameters may be used within a "Sub-Tabber".