Help:Tabber

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

 First tab sample text. Second tab content goes here. Third tab content goes here.
 * -|First Tab Title=
 * -|Second Tab Title=
 * -|Third Tab Title=
 * Click "Preview" to see that the code produced these tabs:

First tab sample text. Second tab content goes here. Third tab content goes here.
 * -|First Tab Title=
 * -|Second Tab Title=
 * -|Third Tab Title=


 * 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 with two sections, using two lines of text: {{#tag:tabber and {{!}}-{{!}}. {{!}}-{{!}} acts as a break for the original tag; creating the second, third et cetera tabbers. The tag itself is a new Tabber, functioning exactly like the Tabber shown above this section.

Example

 * -|Tabber One=


 * -|Tabber Two=

Unlike normal Tabbers, these must be closed with }} at the end, for each Tab!

Code:
 * -|Tabber One=


 * -|Tabber Two=

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.

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.

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.

Further help and feedback
de:Hilfe:Tabber es:Ayuda:Tabber fi:Ohje:Välilehdet fr:Aide:Tabber it:Aiuto:Tabber ja:ヘルプ:Tabber ko:도움말:태버 pl:Pomoc:Tabber pt:Ajuda:Tabber ru:Справка:Табуляция tr:Yardım:Sekmeci uk:Довідка:Табуляція vi:Trợ giúp:Tabber zh:Help:標籤器