Installation

Usage

To use a tabber, create a <div> element with the tabberex class:

<div class="tabberex"></div>

Now, for every tab you want the tabber to have, create a <div> element inside the first one with the tabberex-tab class. You can optionally add a data-tab-header attribute to this <div> to use as the tab's name:

<div class="tabberex">
  <div class="tabberex-tab" data-tab-header="Default tab"></div>
</div>

And now, just put whatever stuff you want associated with that tab in it's respective <div>:

<div class="tabberex">
  <div class="tabberex-tab" data-tab-header="Default tab">I am a tab that says stuff</div>
  <div class="tabberex-tab" data-tab-header="Other tab">I am also a tab that says stuff</div>
</div>

Additional options

Extended header options

You can, instead of using the data-tab-header attribute to define the tab's name, put a span with the tabberex-tab-header class in the <div>. This method actually allows for more flexibility as more than just text can be put in the tab name:

<div class="tabberex">
  <div class="tabberex-tab">
    <span class="tabberex-tab-header">[[File:Image]]</span>
    Tab content
  </div>
</div>

Links in tabs

You can have a tab act as a link to another page if you want by giving that tab's <div> a data-tab-location attribute:

<div class="tabberex">
  <div class="tabberex-tab" data-tab-location="https://dev.fandom.com" data-tab-header="Dev homepage"></div>
  <div class="tabberex-tab" data-tab-location="tabberex_js" data-tab-header="Code"></div>
</div>

Changing default tab

If you don't want the first tab to be the one that's open by default, you can add the tabberex-tab-default class to that tab. If multiple tabs in one tabber have that class, the last tab with that class will be the default.

Example 1:

<div class="tabberex">
  <div class="tabberex-tab">I am not the default tab</div>
  <div class="tabberex-tab tabberex-tab-default">I am.</div>
</div>

Example 2:

<div class="tabberex">
  <div class="tabberex-tab">I am not marked as default</div>
  <div class="tabberex-tab tabberex-tab-default">I am marked as default, but I'm not the default tab</div>
  <div class="tabberex-tab tabberex-tab-default">I am marked as default and I'm the default tab</div>
</div>

Fragmented tabbers

Don't want the tabs and the content of a tabber to be in the same place on a page? No problem. Instead of creating a <div> with the tabberex class, make two <div> tags with the tabberex-head and tabberex-body classes respectively and give them both a data-tabber-id attribute (the value doesn't matter, as long as it's the same for both <div> tags):

<div class="tabberex-head" data-tabber-id="Test tab">
  <div class="tabberex-tab"></div>
  <div class="tabberex-tab"></div>
</div>
<div class="tabberex-body" data-tabber-id="Test tab">
  <div>I am the first tab</div>
  <div>And I am the second</div>
</div>

Custom visible state

Tab content has the CSS visible property set to block by default when visible. In cases where you want to use another value, give the tab a data-tab-display attribute, set to the value you want it to have:

<div class="tabberex">
    <div class="tabberex-tab" data-tab-display="inline">Stuff</div>
</div>

Known issues

• Tables with the mw-collapsible class do not function properly when placed within a <div> with the tabberex class (tabberex-body works fine).

Changelog

2.2 (5/9/2021):

• Fixed bug where event handlers on elements (eg. mw-collapsible) are destroyed when using the "tabberex" class to create a tabber
• Added Custom visible state

2.1 (25/5/2021):

• Fixed bug where extended headers would appear in the tab content when using the "tabberex" class to create a tabber
• Fixed bug where tab visuals weren't correct outside of the editor preview

2.0 (18/1/2021):

• Complete code rework
• Added Fragmented tabbers

1.1 (28/12/2020): Added Extended tab headers

1.0 (25/11/2020): Initial release