Tab Content Script (v 2.2)
Note: Updated April 8th, 08 to version 2.2. Adds support for expanding a tab via a link on another page and using a URL parameter. Only .js file changed from v2.1
Description: This is a versatile Tab Content script that lets you organize regular DIV contents on the page into a tab interface, with the desired content appearing when a tab is clicked on. A fully unobtrusive, CSS and HTML based script, it supports practical features such as default tab selected, persistence of the active tab (ie: when page is reloaded), a "slideshow" mode, ability to expand/contract arbitrary DIVs on the page at the same time, and more. Modifying the CSS tabs used as part of its interface to your own is now also much simpler compared to version 1. Now it really is the ultimate Tab Content script!
Here's a quick outline of the script attributes:
- Fully unobtrusive, search engine friendly script. The tabs are simply list based links, and the tab contents are regular DIV contents on the page. Customization couldn't be easier.
- Specify which tab and its tab content should be shown by default when
the page loads, either via CSS (give target tab a "
selected" class name), or dynamically. - Certain tabs can simply be links to other pages, instead of load a tab content.
- Optional tab persistence feature, so the most recently clicked on tab is remembered even if the page is reloaded or revisited within the browser session.
- (v 2.0) Supports "slideshow" mode, in which script automatically cycles through and selects each tab periodically until a tab is explicitly selected.
- (v 2.0) Ability to expand/contract arbitrary DIVs on the page at the same time as the tabbed content is expanded and contracted.
- (v 2.0) Ability to dynamically select a tab either based on its position within its peers, or directly, using its ID attribute.
- (v 2.1) Ability to dynamically cycle forward/back between tabs. Create a "Next" and "Back" link for users to move between tabs, for example.
- (v 2.0) Ability to set where
the CSS class "
selected" get assigned when a tab is clicked on- either on the tab link itself (its "A" element), or its parent instead (ie: "li" element). This makes the script adaptable to both CSS Tabs that are styled at the "A" level itself, or its parent container instead. - (v 2.2) A link from another page
linking to the target page can select a tab on the later when loaded, via the URL
parameter string ((ie:
http://mysite.com/tabcontent.htm?tabinterfaceid=0). - Supports multiple Tab Contents on the same page!
Note: See also Ajax Tabs Content script if you wish the tab contents to be external pages. Or, if you're looking for the original Tab Content script (before it was rewritten), it can be found here.
Demos:
Tab content 1 here
Tab content 2 here
Tab content 3 here
Tab content 4 here
Back Click here to select last tab 
Forward
Demo #2- Different Tab Style, expanding of arbitrary DIVs on the page enabled
Tab content 1 here
Tab content 2 here
Tab content 3 here
Tab content 4 here
Click here to select 3rd tab | Reload page and select 1st tab using URL parameter
Demo #3- Different Tab Style, "slideshow mode" enabled
Tab content 2 here
Tab content 3 here
Tab content 4 here
Directions
Step 1: Insert the below CSS and script into the HEAD section of your page:
The code above references four external files, which you need to download below:
By default, upload these files into the same directory as where your webpage resides.
Step 2: Finally, simply add the below HTML to where you wish the Tab Content to appear on the page:
The above HTML contains 3 tab demos similar to what you see above. You're done with installation, though you'll want to read on to learn exactly how to adapt things on your own page.
Setting up the script on your page- basic usage
Lets see in detail now how to set up this script on your page. After having added the.js
and .css file references (code of Step 1) to the HEAD section of your page, proceed
with the following:Step 1: Define the HTML for the Tabs themselves. This can be a fancy CSS menu, or even just a DIV tag with a bunch of links inside. Lets use the former:
<ul id="flowertabs"
class="shadetabs">
<li><a href="#" rel="tcontent1" class="selected">Tab
1</a></li>
<li><a href="#" rel="tcontent2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>
The parts in red are significant, regardless of how you define your tabs:
- id="flowertabs": Give the main container of your tab links a unique ID (ie: "
flowertabs"). All links ("A" elements) within this container will be scanned by the script for special meaning. - rel="tcontent1": For each tab link that should reveal additional content when clicked on,
add a "
rel" attribute inside its link ("A") and set it to theIDof the DIV content to expand/contact. For example,rel="tcontent1"tells the script to reveal the DIV called "tcontent1" that's on the page. - rev="divid1, divid2, etc": For each tab link, you can also insert a rev attribute to simultaneously toggle the visibility of arbitrary DIVs on the page. See explanation below.
- class="selected": If you wish a certain tab to be selected by default when the page loads,
give the tab in question a
class="selected"assignment. By default it should be added inside the link itself ("A"). However, the script can also be told to look for such as class in the link's parent container instead (in this case, "LI"). This is useful depending on how the CSS for your tabs are structured. See the full documentation on the next page for more info. - A tab can also just act as a regular link,
with the absence of the "
rel" attribute (ie: the "Dynamic Drive" tab at the very end).
There is an additional attribute you can use, the "rev"
attribute, to also expand/contract arbitrary DIVs outside the Tab interface. See
the documentation below for details.
Step 2: Following the HTML for the tabs themselves, you now need to define the DIVs that are being pointed to inside the tabs, with matching ID attribute values:
<div style="border:1px solid gray; width:450px;
margin-bottom: 1em; padding: 10px">
<div id="tcontent1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>
<div id="tcontent2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>
<div id="tcontent3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>
<div id="tcontent4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>
</div>
There are four DIVs with the designated ID attributes defined above. Notice
how they each match up to the IDs specified earlier using the "rel"
attribute, telling the script which content should be matched up with which tab. This is
the only required portion. A master DIV is added around all of them just to
style the Tab Content area, and is optional. The "class=tabcontent" attribute,
while also optional, should be left as is so the DIVs are initially hidden from
view until the user selects a particular tab.
Step 3: With your Tabs and the DIVs to expand/contract defined, it's
now time to activate the script, by calling ddtabcontent() with the
desired settings:
<script type="text/javascript">
var myflowers=new ddtabcontent("flowertabs")
//enter ID of Tab Container
myflowers.setpersist(true) //toogle persistence of the tabs' state
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()
</script>
The first line just tells the script what the ID of your Tab Container itself
is. The second line toggles the persistence of the tabs' state, whether or not a
clicked on tab should be remembered and recalled upon the user's return (within
the same browser session). The 3rd line tells the script whether to look for
class="selected" within the tab link ("A") itself, or
its parent container instead (ie: "LI"). What value to use depends
on where you will be inserting the class="selected" attribute
inside a tab (see documention). Lastly, the 4th line initializes everything.
And that's it for setting up the script in its basic form. However, you'll want to also learn how to expand/contract arbitrary DIVs on the page at the same time a tab is selected, plus how to get the tabs to automatically rotate like a slideshow. Read on for more good stuff!
Turning on slideshow mode in a Tab Content instance
You can have the tabs within your Tab Content automatically
rotate every x seconds until a user explicitly clicks on a tab. To enable
"slideshow mode" on your Tab Content, just pass in an integer when calling
instance.init() to initialize your script:
<script type="text/javascript">
var myflowers=new ddtabcontent("flowertabs")
//enter ID of Tab Container
myflowers.setpersist(true) //toogle persistence of the tabs' state
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init(3000)
</script>
Notice the integer in red, which is in units of milliseconds. With one defined, the script will rotate through the tabs every x milliseconds (so 3000=3 seconds).
Dynamically selecting a tab anywhere on your page
After your Tab Content is initialized and displayed, you can dynamically select any of its tabs, by calling the method:
instance.expandit(tabid_or_position)
The parameter entered should either be a string representing the tab link's ID attribute (you need to first assign one to that tab), or an integer corresponding to that tab's position relative to its peers, to select. For the later, the counting starts at 0 (ie: 0=1st tab). Building on the example above, here are two links that select two tabs within it:
<!--Selects 2nd tab within Tab instance
"myflowers" -->
<a href="javascript:myflowers.expandit(1)">Select 2nd Tab</a>
<!--Selects tab with ID="roses" within Tab instance "myflowers" -->
<!--Be sure to first insert ID="roses" inside the target tab's link
element.
<a href="javascript:myflowers.expandit('roses')">Select "Roses" tab</a>
Dynamically selecting a tab using a
remote link (v2.2 or above)
Starting in v2.2, you can define a link on another page that selects a tab on the target page (one containing Tab Content script) when the page is loaded. In other words, depending on the referring page, a different tab can be selected by default. This is done by adding to the original link a URL parameter string specifying the Tab Content's main container ID, plus the index of the tab to select. The syntax is:
<a href="target.htm?tabinterfaceid=index">Target Page</a>
where "tabinterfaceid" is the ID of the main tab
container, and index is the tab to select based on its position
relative to its peers (0=1st tab). For example, given the below initialization code:
<script type="text/javascript">
var myflowers=new ddtabcontent("flowertabs")
//enter ID of Tab Container
myflowers.setpersist(true) //toogle persistence of the tabs' state
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()
</script>
The following link (presumably on another page) causes the 2nd tab within the
above Tab content instance to be selected by default when
"target.htm" loads:
<a href="target.htm?flowertabs=1">Target Page</a>
If your page contains multiple Tab content instances and you wish to select a tab explicity using the URL method for all of them, you can do that as well:
<a href="target.htm?flowertabs=1&countrytabs=2>Target Page</a>
The URL parameter method of tab selection overrides both the persisted
tab states and default selected tab setting using class="selected' within the
HTML.
Expanding/ Contracting arbitrary DIVs on the page when a tab is
selected
You already know that a tab can be associated with a
corresponding sub content using this script, via the "rel"
attribute. However, you can in fact take this one step further, and also have
the same tab manipulate the visibility of arbitrary DIVs beside the sub content
it is associated with! This is done using the "rev" attribute, and
setting them to the ID(s) of the arbitrary DIVs on the page to also
expand/contract:
<div id="flowernote"
style="display:none;">
Arbitrary DIV 1
</div>
<ul id="flowertabs" class="shadetabs">
<li><a href="#" rel="tcontent1" class="selected">Tab 1</a></li>
<li><a href="#" rel="tcontent2" rev="flowernote,
flowernote2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4" rev="flowernote3">Tab
4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>
<div style="border:1px solid gray; width:450px;
margin-bottom: 1em; padding: 10px">
Sub content DIVs here
"
"
</div>
<p>Some random paragraph on the page</p>
<div id="flowernote2" style="display:none;">
Arbitrary DIV 2
</div>
<div id="flowernote3" style="display:none;">
Arbitrary DIV 3
</div>
<script type="text/javascript">
//Initialize script at the very end...
</script>
Within the same "rev" attribute, separate multiple IDs with a
comma (ie: rev="flowernote, flowernote2"). With the above code, clicking on Tab 2 will not only display the Tab sub
content with ID "tcontent2", but also the two arbitrary DIVs
anywhere on the page called "flowernote" and "flowernote2".
Clicking on Tab 4 will display "flowernote3" while also hiding "flowernote"
and "flowernote2". In other words, the DIVs specified using the "rev"
attribute are interlinked.
On the next page, we document all the available methods you can use for Tab Content script, plus more examples!
Table Of Contents
This script consists of an index page plus a supplementary page: