New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF1+ IE5+ Opr7+

Tab Content Script (v 2.2)

Author: Dynamic Drive

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 1 here
Tab content 2 here
Tab content 2 here
Tab content 3 here
Tab content 3 here
Tab content 4 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 1 here
Tab content 2 here
Tab content 2 here
Tab content 3 here
Tab content 3 here
Tab content 4 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 1 here
Tab content 1 here

Click here to select tab with id="myfavorite"

Tab content 2 here
Tab content 2 here
Tab content 3 here
Tab content 3 here
Tab content 4 here
Tab content 4 here


Directions Developer's View

Step 1: Insert the below CSS and script into the HEAD section of your page:

Select All

The code above references four external files, which you need to download below:

  1. tabcontent.css
  2. tabcontent.js
  3. shade.gif, shadeactive.gif, indentbg.gif, indentbg2.gif

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:

Select All

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:

  1. 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.
  2. 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 the ID of the DIV content to expand/contact. For example, rel="tcontent1" tells the script to reveal the DIV called "tcontent1" that's on the page.
  3. 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.
  4. 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.
  5. 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: