Help:Tabber

Help page

This wiki uses the TabberNeue extension.

Basic usage

Use the <tabber> tag. Tabs are defined with the |-|Tab Name= syntax.

Example
Syntax Result
<tabber>
|-|Tab One=
Text here!
|-|Tab Two=
Text here!
</tabber>

Text here!

Text here!

Fixing rendering problems

Sometimes the parser doesn't generate the output correctly, so you may need to modify the tabber block to fix them.

Inconsistent padding

Tab content that starts with links (or maybe anything that isn't text) may not display with proper padding. Wrap these with <span> to force it to display correctly.

Incorrect example
Syntax Result
<tabber>
|-|Tab One=
[[Main Page|This tab starts with a link]], which confuses it.
|-|Tab Two=
This one doesn't!
</tabber>

This one doesn't!

Correct example
Syntax Result
<tabber>
|-|Tab One=
<span>
[[Main Page|This tab starts with a link]], which confuses it.
</span>
|-|Tab Two=
This one doesn't!
</tabber>

This one doesn't!

Lists

If a tab's entire content is a list, the parser may not separate them properly. This can be fixed by wrapping the lists with <span>, or rewrite them to use HTML <ol> or <ul> lists.

Incorrect example
Syntax Result
<tabber>
|-|Tab One=
#List item one
#List item two
#List item three
|-|Tab Two=
#Tab two and it's unordered
#For some reason
</tabber>

#List item one

  1. List item two
  2. List item three

#Tab two and it's unordered

  • For some reason

  • Correct example using <span>
    Syntax Result
    <tabber>
    |-|Tab One=
    <span>
    #List item one
    #List item two
    #List item three
    </span>
    |-|Tab Two=
    <span>
    #Tab two and it's unordered
    #For some reason
    </span>
    </tabber>
    
    1. List item one
    2. List item two
    3. List item three

    1. Tab two and it's unordered
    2. For some reason
    Correct example using HTML lists
    Syntax Result
    <tabber>
    |-|Tab One=
    <ol>
    <li>List item one</li>
    <li>List item two</li>
    <li>List item three</li>
    </ol>
    |-|Tab Two=
    <ol>
    <li>Tab two and it's unordered</li>
    <li>For some reason</li>
    </ol>
    </tabber>
    
    1. List item one
    2. List item two
    3. List item three
    1. Tab two and it's unordered
    2. For some reason