The DJB Wiki Guide to Tabs
Tabs are a brilliant way to organize long pages, allowing readers to click through different sections without endless scrolling.
There are two different ways to implement tabs, suitable for different uses. If you just want to organize the contents of a single wiki page, there's one method for that. If you want to group together multiple wiki pages through the use of tabs, there's a different way!
Instead of building separate subpages, this guide will show you how to write your content directly inside the tabs themselves on a single page.
Option 1: Using the Visual Editor
Setting up the Tabber
When using the Visual Editor, the TabberNeue extension provides a raw text box disguised as a popup window. Here is how to use it:
- Open your page in the Visual Editor.
- Click Insert in the top toolbar and select the Tabber option found under the "More" dropdown.
- A dark dialog box titled "Tabber" will pop up with a large empty text area.
- Inside this box, you must type your tab titles and your content directly. To build a tabbed box, you only need to remember three pieces of code:
|-| : This is the separator. It tells the wiki, "I am starting a new tab now."= (The Equals Sign) : This goes immediately after your tab's title to tell the wiki where the title ends and your actual content begins.
Type the following layout into the box:
|-|Tab 1 Name=
This is the text inside the first tab.
|-|Tab 2 Name=
This is the text inside the second tab.
- Click Apply changes in the top right corner of the box to insert the tabs onto your page.
Option 2: Using the Source Editor (For Advanced Users)
The Standard Syntax
If you are writing the code manually, you just use the standard <tabber> and |-| syntax every single time.
<tabber>
|-|Tab 1 Name=
This is the text inside the first tab.
|-|Tab 2 Name=
This is the text inside the second tab.
|-|Tab 3 Name=
This is the third tab.
</tabber>
Examples of Pages Using Tabs
Alex Draconis
Outer Rim Wrestling
Crucial Rules to Remember
- Keep the Title Clean: Do not put spaces right before the equals sign (e.g., type
|-|My Title= instead of |-|My Title =).
- Formatting Quirks: If the very first thing inside your tab is a bulleted list (
*), a numbered list (#), or a direct link ([[Page]]), MediaWiki might squish the padding and make it look weird. If your text looks broken, try adding a normal sentence before your list, or wrap your content in standard HTML paragraph tags.
- Nesting: You cannot easily put a
<tabber> inside of another <tabber>. There is technically a way to do this if you really need to, please contact the Wiki Staff and we can assist with this.
In this version, the tabs themselves live on a main landing page, but the actual text inside those tabs is pulled (transcluded) from separate subpages.
The main landing page should not contain anything but the Tabber interface we will be setting up following these instructions.
Option 1: Using the Visual Editor
Step 1: Setting up the Main Page
- Open your main landing page in the Visual Editor.
- Click Insert in the top toolbar and select the Tabber option found under the "More".
- A dark dialog box titled "Tabber" will pop up with a large empty text area.
- Inside this box, you must type the standard Tabber code to build your tabs and pull in your subpages. Type the following:
|-|First Tab Title=
{{:Name of First Subpage}}
|-|Second Tab Title=
{{:Name of Second Subpage}}
- Important: If your subpage is in the main article namespace (where most wiki pages live), you must put a colon (
:) immediately before the name (e.g., {{:My Subpage Name}}).
- Click Apply changes in the top right corner of the box to insert the tabs onto your page.
Step 2: Creating Nested Tabs (Tabs inside of Tabs)
Because we rely entirely on MediaWiki's native transclusion, creating nested tabs on a subpage is exactly the same as creating tabs on the main page.
- Open your specific subpage in the Visual Editor.
- Just repeat Step 1! Click Insert > Tabber, type your
|-| code into the popup box, and hit Apply changes.
Option 2: Using the Source Editor (For Advanced Users)
The Standard Syntax
Whether you are building a main page or a nested subpage, you just use the standard <tabber> and |-| syntax every single time. The wiki's core parser handles the heavy lifting before TabberNeue even realizes what is happening.
<tabber>
|-|First Tab Title=
{{:Name of First Subpage}}
|-|Second Tab Title=
{{:Name of Second Subpage}}
</tabber>
Examples of Pages Using Tabs
Alex Draconis
Outer Rim Wrestling
Crucial Rules to Remember
- The Colon Rule: If you are transcluding a page from the main article namespace (this is where most wiki pages live), you must put a colon immediately before the name (e.g.,
{{:Alex Draconis}}). If you do not, the wiki will assume you are looking for a Template and break the layout.
- Clean Syntax: Because native transclusion effectively "copy-pastes" the raw code from the subpage into the main page before finalizing the render, it bypasses the nesting limitations. You don't have to worry about standard pipes (
|) shattering the layout if a template is used inside an inner tab, and you never have to use the {{!}}-{{!}} separator.