Introduction
Tabber is a function on FANDOM that allows you to put information in multiple or just one tab(s). It is very similar to Tabview, however, it does not take the information from other pages and templates.
Simple Tabbers
Code:
<tabber> |-|(Insert tab name here one)= Content One |-|(Insert tab name here two)= Content Two </tabber>
If you want to add a new tab just repeat the |-| lines. Make sure to add the = at the end of the name or the tabber won't function correctly
What it looks like:
Complex Tabbers
Fun fact: 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. To demonstrate:
Unlike normal Tabbers, these must be closed with }} at the end, for each Tab!
Code:
<tabber>
|-|Tabber One=
{{#tag:tabber|1=
Content one
{{!}}-{{!}}
2=
Content two
{{!}}-{{!}}
3=
Et cetera.
}}
|-|Tabber Two=
{{#tag:tabber|4=
Content `
{{!}}-{{!}}
5=
Content 2
{{!}}-{{!}}
6=
Content 3
}}
</tabber>
Even More Complex Tabbers!
It is possible to create tabbers with more than 3 sections. Here's an example (Four Sections):
Code:
<tabber>
|-|First Tabber=
{{#tag:tabber|
1=
Text 1
{{!}}-{{!}}
2=
Text 2
{{!}}-{{!}}
3=
Text 3
}}
{{#tag:tabber|
1=
Text 1
{{!}}-{{!}}
2=
Text 2
{{!}}-{{!}}
3=
Text 3
}}
{{#tag:tabber|
1=
Text 1
{{!}}-{{!}}
2=
Text 2
{{!}}-{{!}}
3=
Text 3
}}
{{#tag:tabber|
1=
Text 1
{{!}}-{{!}}
2=
Text 2
{{!}}-{{!}}
3=
Text 3
}}
|-|Second Tabber=
{{#tag:tabber|
1=
Text 1
{{!}}-{{!}}
2=
Text 2
{{!}}-{{!}}
3=
Text 3
}}
{{#tag:tabber|
1=
Text 1
{{!}}-{{!}}
2=
Text 2
{{!}}-{{!}}
3=
Text 3
}}
{{#tag:tabber|
1=
Text 1
{{!}}-{{!}}
2=
Text 2
{{!}}-{{!}}
3=
Text 3
}}
{{#tag:tabber|
1=
Text 1
{{!}}-{{!}}
2=
Text 2
{{!}}-{{!}}
3=
Text 3
}}
|-|Third Tabber=
{{#tag:tabber|
1=
Text 1
{{!}}-{{!}}
2=
Text 2
{{!}}-{{!}}
3=
Text 3
}}
{{#tag:tabber|
1=
Text 1
{{!}}-{{!}}
2=
Text 2
{{!}}-{{!}}
3=
Text 3
}}
{{#tag:tabber|
1=
Text 1
{{!}}-{{!}}
2=
Text 2
{{!}}-{{!}}
3=
Text 3
}}
{{#tag:tabber|
1=
Text 1
{{!}}-{{!}}
2=
Text 2
{{!}}-{{!}}
3=
Text 3
}}
|-|Fourth Tabber=
{{#tag:tabber|
1=
Text 1
{{!}}-{{!}}
2=
Text 2
{{!}}-{{!}}
3=
Text 3
}}
{{#tag:tabber|
1=
Text 1
{{!}}-{{!}}
2=
Text 2
{{!}}-{{!}}
3=
Text 3
}}
{{#tag:tabber|
1=
Text 1
{{!}}-{{!}}
2=
Text 2
{{!}}-{{!}}
3=
Text 3
}}
{{#tag:tabber|
1=
Text 1
{{!}}-{{!}}
2=
Text 2
{{!}}-{{!}}
3=
Text 3
}}
</tabber>
Adding Tables into Complex Tabbers
Adding tables to regular tabbers works just the same as adding them to any page, you can even add them within complex tabbers. The solution is to simply replace all the pipes “|” in the table syntax with “{{!}}”. Here's an example:
| Column 1 Heading |
|---|
| Info 1 |
| Info 1a |
Code:
<tabber>
|-|Tab 1=
{{#tag:tabber|Sub-tab 1=
{{{!}}class="article-table"
!Column 1 Heading
!Column 2 Heading
{{!}}-
{{!}}Info 1
{{!}}Info 2
{{!}}-
{{!}}Info 1a
{{!}}Info 2a
{{!}}}
{{!}}-{{!}}
Sub-tab 2=
{{{!}}class="article-table"
!Column 1 Heading
!Column 2 Heading
{{!}}-
{{!}}Info 3
{{!}}Info 4
{{!}}-
{{!}}Info 3a
{{!}}Info 4a
{{!}}}
}}
|-|Tab 2=
{{{!}}class="article-table"
!Column 1 Heading
{{!}}-
{{!}}Info 1
{{!}}-
{{!}}Info 1a
{{!}}}
</tabber>
Adding images into tabbers
Adding images to tabbers is just like adding an image to an article! Here's an example:
And here's the code:
<tabber> |-|Content one= [[File:forest1.png]] |-|Content two= [[File:forest1.png]] </tabber>
You can also modify the image! Just like this:
Here's the code for that:
<tabber> |-|Content one= [[File:Forest1.PNG|50px|left]] |-|Content two= [[File:Forest1.PNG|200px|right]] </tabber>