Help:Tab view

This feature is not currently available on wikis which use the new Unified Community Platform (UCP).
See this page for more information on the new platform.

This extension is enabled by default on Fandom.

Tab view provides an easy way to display multiple content pages in a single article using tabs. This can be an attractive and useful view for organizing content.

For a similar extension that doesn't require multiple pages, see Tabber.

Step-by-step

• First, you need to create a page of content for each tab you wish to display. These pages can be created anywhere on your wiki.

In this example, we've created three subpages to this article, which we will use in our tabs below. They are titled:

• Help:Tab view/Sample tab content 1
• Help:Tab view/Sample tab content 2
• Help:Tab view/Sample tab content 3

• Open the page that you'd like to display tabs on for editing, and switch to source mode.
• Enter your tab code in the following format:

<tabview>
PAGENAME1|TITLE1
PAGENAME2|TITLE2
PAGENAME3|TITLE3
</tabview>

So, in our example here, we'll enter:

<tabview>
Help:Tab view/Sample tab content 1|Tab 1
Help:Tab view/Sample tab content 2|Tab 2
Help:Tab view/Sample tab content 3|Tab 3
</tabview>

This will give us the following tabs:

• Tab 1
• Tab 2
• Tab 3

Customization

In addition to the title, there are two other variables you can customize in your tabs: cache and preset. They are configured in this order:

<tabview>
PAGENAME|TITLE|CACHE|PRESET
</tabview>

Disabling tab cache

If a page is showing very frequently updated information, you may want to force the tab to check for new content on each page load. This can be done with a second pipe, followed by the word "false." This should be used sparingly, however, as it can slow down the overall reading experience. By default, this option is "true".

<tabview>
Help:Tab view/Sample tab content 1|Tab 1|false
Help:Tab view/Sample tab content 2|Tab 2
Help:Tab view/Sample tab content 3|Tab 3
</tabview>

Preset an open tab

The last variable chooses which tab is open when the page loads. By default, the first tab is open, but you can choose an open tab by using a third pipe followed by the word "true":

<tabview>
Help:Tab view/Sample tab content 1|Tab 1
Help:Tab view/Sample tab content 2|Tab 2||true
Help:Tab view/Sample tab content 3|Tab 3
</tabview>

This will give you:

• Tab 1
• Tab 2
• Tab 3

Parameters

The only parameters available in tabview are "title" and "id". You cannot customize each tabview in the page using wikitext; it has to be done via site CSS. The parameters are:

<tabview title="..." id="...">

Styling

With the "id" parameter in place, you can modify every tab. Example:

ul.tabs > [data-tab="flytabs_Example0"] {
	/* style goes here for data-tab="flytabs_Example0" (first tab) */
}
ul.tabs > [data-tab="flytabs_Example1"] {
	/* style goes here for data-tab="flytabs_Example1" (second tab) */
}
ul.tabs > [data-tab="flytabs_Example2"] {
	/* style goes here for data-tab="flytabs_Example2" (third tab) */
}

The tabs themselves will appear in a <div> with the "id" "flytabs_Example", and their content will be placed in a separate <div> with the id "flytabs_Example-content-wrapper".

Issues

Mobile experience

On mobile devices, the indicated pages are shown as a list of links rather than as tabs. This is because tabbed experiences are difficult to operate on mobile devices.

View/edit tab content

Tab view 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. Since the tab is actually a link element, a user could right click it and click open to manually follow the link. However there is a script on the Fandom Developers Wiki called TabViewEditLinks that adds the edit links.

Nesting tabs

Tabview does not handle nested tabs correctly. In other words, pages you include in your tabs cannot have their own tabview section. The viewer will start to experience the issue when they open a tab that contains another tabview section. Although the specifics of the glitch appear to be inconsistent, the general issue is that the content of the first tab will be displayed followed by the intended tab content. Another issue is that the nested tabs will be displayed as a bulleted list of links instead of tabs.

Once this has occurred, the offending tab's content will display at the end of each of the other tabs. Navigating back to the offending tab may append yet another copy of the tab's content to the end when viewing the other tabs. For example, let's assume we include a 4th page (as "Tab 4") that has its own tabview section. When the viewer opens "Tab 4", they will see the contents of "Tab 1" followed by the contents of "Tab 4". If they navigate to "Tab 3", they will now see the contents of "Tab 3" followed by the contents of "Tab 4". If they navigate to "Tab 4" again and then to "Tab 2", they will see the contents of "Tab 2" followed by 2 copies of the contents of "Tab 4".

If you wish to have nested tabs, you will need to use tabber instead of tabview.

Search engines

Because a page using Tabview must use JavaScript to extract other pages and insert them elsewhere, the results may slow down the performance of search engine crawling. Additionally, the same page content is shown in multiple result pages.

Include tags

Tabview does not transclude page content. As such, the original page will be displayed and elements such as wikitext include tags (<includeonly>, <noinclude>, and <onlyinclude>) will show the same content as the source page.

See also

• Help:Tabber

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