Community Central


120,809pages on
this wiki

Tabber used to display character types

This extension is enabled by default on Wikia.

Tabber allows you to add multiple tabs to a section of content, which can be toggled without having to reload the page.


  • 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.
  • Click "Preview". You'll 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 wikia's content. For example, replace with "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 InformationEdit

Formatting: Keep in mind that the title should always end with an equal sign ("="), and the tab separator ("|-|") must always appear between tabs.

Wikicode: You can use any wikicode within your tabs, including templates and images.

Headers: H2 and H3 headers are disabled by default in Tabber. You can enable them by adding the following code to MediaWiki:Wikia.css (and MediaWiki:Monobook.css if you wish to show them in the Monobook skin as well):

.tabberlive .tabbertab h2, .tabberlive .tabbertab h3 { 
display:block !important; 

Tabview and Tabber: Tabber tags can be used within another tabber. Tabber tags will not work in the tabview tags; the text inside of the tabber will render as several paragraphs.


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

See alsoEdit

Further Help & FeedbackEdit

Around Wikia's network

Random Wiki