Tabs

Tabs allow you to separate content into neatly tabbed sections. This allows users to access new content without loading entirely new pages, which saves on bandwidth, and speeds up browsing. You will need to be comfortable editing HTML code to implement this.

Example

 


The HTML Code

<ul class="nav nav-tabs"> 
<li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
<li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
<li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
</ul>
<div class="tab-content"> 
<div class="tab-pane active" id="tab1">
<p>Enter the information for tab 1 here.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Enter the information for tab 2 here.</p>
</div>
<div class="tab-pane" id="tab3">
<p>Enter the information for tab 3 here.</p>
</div>
</div>

Edit your page's HTML source code by clicking the HTML button in the visual editor.  Copy the above code and paste it where you want your tabs to appear on the page.

Simply replace the text highlighted in red (as shown in the above example) with your own content.