Help:Tabs

This is a ShoutWiki help page, hosted at ShoutWiki Hub. If you want to suggest changes, leave a message on its talk page. If you want to replace this page with a custom help page for your wiki, click the create button above.

Tabs can be provided on your wiki pages using the TabSystem JavaScript script.

How to install

1. Copy the code found here to MediaWiki:Common.js on your site.
2. Copy the code found here to MediaWiki:Common.css on your site.
3. Done! You can now easily add tabs to your pages.

How to use

TabSystem relies on you using divs to split up your content. To start the tab section of your page, have a div called <div class="tabcontainer">.

To add a tab, start with <div class="tabbox">. After this, you can add the name of your tab using <div class="tab">Tab name</div>. Follow this with the contents of your tab, then close the div.

A full code example for a five-tabbed page can be seen below. Indentation is included to help make things clear, though isn't required.

<div class="tabcontainer"> 
    <div class="tabbox"> 
        <div class="tab">Tab #1</div>
        Contents of the first tab will go here.
    </div> 
    <div class="tabbox"> 
        <div class="tab">Tab #2</div>
        Contents of the second tab will go here.
    </div> 
    <div class="tabbox"> 
        <div class="tab">Tab #3</div>
        Contents of the third tab will go here.
    </div> 
    <div class="tabbox"> 
        <div class="tab">Tab #4</div>
        Contents of the fourth tab will go here.
    </div> 
    <div class="tabbox"> 
        <div class="tab">Tab #5</div>
        Contents of the fifth tab will go here.
    </div> 
</div>