MediaWiki/Foundation/Tabs
Foundation CSS Framework for MediaWiki: Multiple Tab Sets
Tabs facilitate navigation on a page. Tab groups can be arranged horizontally, or vertically.
A group of tabs for navigation is called a Multiple Tab Set.
Tabs are different from buttons. Buttons are generally used to link to separate pages or articles. However, Tabs enable the content to be stored on the same page. Only the content for the active tab is displayed.
Tip: If the content is large it may be easier to transcluded it from another source or namespace. This will keep the code in the tab set more concise and less problematic.
Note: To use components from the Zurb Foundation CSS Framework in MediaWiki, first install a custom skin such as the Foreground Skin or the Pivot Skin, which are built upon the Foundation CSS Framework.
Example 1: Horizontal Tabs
Each tab has an id. In this example, the first tab has id="tab1".
Tab 1 is active so this content is displayed first.
Content for Item 2 (#tab2) is included here.
Content for Item 3 (#tab3) is included here. Content can include other items such as panels and buttons.
Content for Item 4 (#tab4) is included here. If the content is large, consider using transclusion.
The code is shown below:-
Note: The tab set is enclosed within html tags because MediaWiki does not recognise the <a tag used to link to the tab contents. This also requires that $wgRawHtml be enabled in your LocalSettings.php.
<html>
<div>
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#tab1">Item 1</a></li>
<li class="tab-title"><a href="#tab2">Item 2</a></li>
<li class="tab-title"><a href="#tab3">Item 3</a></li>
<li class="tab-title"><a href="#tab4">Item 4</a></li>
</ul>
</div>
<div class="tabs-content">
<div class="content active" id="tab1">
<p>Each tab has an id. In this example, the first tab has id="tab1".</p>
<p>Tab 1 is active so this content is displayed first.</p>
</div>
<div class="content" id="tab2">
<p>Content for Item 2 (#tab2) is included here.</p>
</div>
<div class="content" id="tab3">
<p>Content for Item 3 (#tab3) is included here. Content can include other items such as panels and buttons.</p>
</div>
<div class="content" id="tab4">
<p>Content for Item 4 (#tab4) is included here. If the content is large, consider using transclusion.</p>
</div>
<div>
</html>
Example 2: Vertical Tabs
The orientation of the horizontal tab set in Example 1 can be changed to vertical simply - just add the class 'vertical'.
Each tab has an id. In this example, the first tab has id="tab1".
Tab 1 is active so this content is displayed first.
Content for Item 2 (#tab2) is included here.
Content for Item 3 (#tab3) is included here. Content can include other items such as panels and buttons.
Content for Item 4 (#tab4) is included here. If the content is large, consider using transclusion.
The code is shown below:-
<html>
<div>
<ul class="tabs vertical" data-tab>
<li class="tab-title active"><a href="#tab1">Item 1</a></li>
<li class="tab-title"><a href="#tab2">Item 2</a></li>
<li class="tab-title"><a href="#tab3">Item 3</a></li>
<li class="tab-title"><a href="#tab4">Item 4</a></li>
</ul>
</div>
<div class="tabs-content">
<div class="content active" id="tab1">
<p>Each tab has an id. In this example, the first tab has id="tab1".</p>
<p>Tab 1 is active so this content is displayed first.</p>
</div>
<div class="content" id="tab2">
<p>Content for Item 2 (#tab2) is included here.</p>
</div>
<div class="content" id="tab3">
<p>Content for Item 3 (#tab3) is included here. Content can include other items such as panels and buttons.</p>
</div>
<div class="content" id="tab4">
<p>Content for Item 4 (#tab4) is included here. If the content is large, consider using transclusion.</p>
</div>
<div>
</html>
