Tabbed Panels

Code listing for tp.html

Including the javascript code

<script type="text/javascript" src="/js/tp/tp.js"></script>
<link rel="stylesheet" href="/js/tp/tp.css" />

The script and style sheet can be renamed and located in any directory.
The same script can be used for every time, no need for a copy per page.
Style sheets are used to create the tabbed appearance. Other styles are possible.

Starting the script

<body onload="tpSet('control', 'tabs', 'tp1', 'tp2', 'tp3');">

The order of tp1, tp2, tp3, … will set the order for the tabs.
To create tabs within tabs, call tpSet for the inside tabs first.

Writing the content of each panel

Write your content the way you want it to be seen if the tabbed panel javascript doesn’t work.

<div id="control">
<div id="tp2" title="Tab 2">
</div>
<div id="tp1" title="Tab 1">
</div>
</div>
<div id="tp3" title="Tab 3">
</div>

Any content inside the control will be removed.
Attributes id and title are required.
This example uses <div>, but any element can be used.
Elements do not need to follow the tab order in the source code.

Preview

Note: Comments have been replaced with <p> for this preview. Also, tp1 and tp2 have been swapped. In the source code, tp2 comes first. By specifying tp1 first in the call to tpSet, it becomes the first tab, ahead of tp2.

any content in here (except panels) will be replaced with the tabs

your content for the second tab goes in here

your content for the first tab goes in here

your content for the third tab goes in here