Before You Begin

jQuery Tools requires the editing of HTML source code.  Contact us at webhelp@med.unc.edu to verify that:

• The jQuery Tools plug-in has been installed on your site (in most cases it already will be).

• Javascript has been enabled for your site.
• tabs.js javascript is loaded as part of your page. (We will do this for you if needed).

Basic Tab Setup

Example

• Tab 1
• Tab 2
• Tab 3

There are two terms being used: tabs and panes.  Tabs are the elements that you click, and panes are containers for content that is associated with those tabs.

The HTML Code

Edit your page's HTML source code by clicking the HTML button on the visual editor, or clicking "Edit without visual editor".  Paste the following where you want your tabs and content to appear:

<!-- the tabs -->
<ul class="tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
 
<!-- tab "panes" -->
<div class="panes">
<div>First tab content. Tab contents are called "panes"</div>
<div>Second tab content</div>
<div>Third tab content</div>
</div>

You can edit what's inside the <li> and <div> elements to reflect the tabs and content you want to use.  If tab text needs to be broken into two lines (it can be long), you can use the <br/> element. Please note that the class attribute for both the <ul> and the <div> are very important - without these names, the tabs will not work!

The Javascript Code

The javascript is loaded as part of the page and does not require anything more than the above HTML structure. Please contact the web team if you notice that the tabs aren't working - to make the tabs available to your page, we will need to do a bit of configuration under-the-hood.

If you have any questions or issues, please contact webhelp@med.unc.edu.

More Information

The official jQuery Tools documentation shows additional examples and customization options.

[top]