Tabs - Creating and Updating

There are two fandom extensions for creating Tabs in a document available on the Legacy platform

Tabview and Tabber, but Tabview is not be available on the new UCP platform.

## Tabber

There are multiple ways to use Tabber on a page.

### Option 1

This is the simplest and most common usage of Tabber.

* 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.
</tabber>

```

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

* First Tab Title
* Second Tab Title
* Third Tab Title
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.

### Option 2

This is the option that can replace Tabview and will pull in pages.

#### Articles that are in namespace:

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

```
<tabber>
Tab 1={{:Portal Future Wiki:Main Article}}
</tabber>

```

* Click "Preview" to see that the code produced these tabs:
* 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.

#### Normal Articles:

* Open an article for editing and switch to Source mode.
* Copy and paste the following code into your editor.
* Note the Colon (**:**) at the start of the article name, this is very important.

```
<tabber>
Tab 1={{:Main Article/subpage 1}}
</tabber>

```

* Click "Preview" to see that the code produced these tabs:
* 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.

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

Option 1 can be edited from source mode.

Tabber option 2 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.

After several experiments, the easiest and perhaps the wisest method is to include a simple message / instructions at the bottom of the same page with the Tabber code on it, that will display the same message for every tab change. An example of the message:

#### Table of Contents

Default TOC doesn't work at all and the templates; nor does the magic word \_\_TOC\_\_. Templates TOCleft and TOCright only work on the first page that meets the criteria to display, none of the rest. It is better to just leave any kind of TOC out and let the default generate. The TOC will still show up on any of the pages that are viewed outside of the Tabber view.

#### Category Assignments

If one page is assigned a different category then what the rest are, then all of the articles are added to that category. Such as Events, all of the pages are in Category:Events, but if you add one page from another category, then all of the pages or at least the first one is also assigned to that Category. That can be a problem with auto assigned categories embedded into infoboxes. The same problem exists if one of the pages is assigned to Category:Article Stubs.

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