Before You Begin
jQuery Tools requires the editing of HTML source code. Contact us at firstname.lastname@example.org to verify that:
- The jQuery Tools plug-in has been installed on your site (in most cases it already will be).
Basic Tab Setup
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 -->
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<!-- tab "panes" -->
<div>First tab content. Tab contents are called "panes"</div>
<div>Second tab content</div>
<div>Third tab content</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!
If you have any questions or issues, please contact email@example.com.
The official jQuery Tools documentation shows additional examples and customization options.