Tab Content documentation and examples

The below explains all the methods of Tab Content script at your disposal:

ddtabcontent() constructor function and methods
Constructor Description
new ddtabcontent(tabcontainerID)

Required

Main ddtabcontent() constructor function to create a new instance of Tab Content script.

Parameter:

  • tabcontainerID: ID of the container that surrounds your tab links. Typically a DIV or a UL element.

Example:

var myflowers=new ddtabcontent("flowertabs")

Method

Description

instance.setpersist(true/false) Tells the script whether to persist the tabs' state for the duration of the browser session. If enabled, the last clicked on tab is remembered and recalled upon the visitor's return.

Parameter:

  • true/false: Boolean value (true or false without quotes around it!).
instance.setselectedClassTarget(target) Changes the element the script sifts through to locate a class="selected" declaration (which tells the script to select that tab by default). By default the script expects the declaration to be inserted directly inside the tab's link ("A") element:

<li><a href="#" rel="tcontent1">Tab 1</a></li>
<li><a href="#" rel="tcontent2" class="selected">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>

If you insert class="selected" elsewhere in the tab's hierarchy (ie: the "LI" element instead), the script will no longer select that tab by default, as it doesn't know to look for the declaration there.

Based on the way your tabs are styled, you may want to add class="selected" to the parent container of each tab link instead. For example, this may be appropriate for the below sample tab links which are each contained in a DIV tag:

<div><a href="#" rel="tcontent1">Tab 1</a></div>
<div class="selected"><a href="#" rel="tcontent2">Tab 2</a></div>
<div><a href="#" rel="tcontent3">Tab 3</a></div>

To inform the script to search each tab's parent container for this CSS classname, you would invoke:

instance.setselectedClassTarget("linkparent")

The two keywords supported for the lone parameter are "link" or "linkparent".

Parameter:

  • targetstring: A string with two possible values: "link" or "linkparent". The default is the former, telling the script to look for class="selected"  inside each tab's link itself. The later tells the script to look for this CSS class in each of the tab's parent container instead.
instance.init(optional_integer)

Required

Call this function at the very end to initialize this instance of the Tab Content script. You can pass it an optional integer parameter to put the script into slideshow mode, so the tabs are automatically rotated when the page loads based on a time interval until the user clicks on a tab.

Parameter:

  • optional_integer: An optional parameter that if defined puts the tabs in slideshow mode (so they auto rotate). The valid value is an integer in milliseconds (ie: 3000 means 3 seconds), to set the delay between rotation.

Examples:

myflowers.init() //Just start up the script for this tab instance

mypets.init(4500) //Auto rotate through the tabs every 4.5 seconds for this tab instance

Additional method(s)

Description

instance.expandit(tabid_or_position) This method lets you dynamically select any tab based on either its ID attribute (you need to first assign one to that tab), or position relative to its peer tab links. The method can be called anywhere on the page, such as inside a link on the page.

Parameter:

  • tabid_or_position: Either a string representing the tab link's ID, 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).

Example:

Based on the following sample tabs layout:

<ul id="flowertabs" class="shadetabs">
<li><a href="#" rel="tcontent1" class="selected">Tab 1</a></li>
<li><a href="#" rel="tcontent2" id="roses">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4">Tab 4</a></li>
</ul>

Here is how to dynamically select two of its tabs anywhere on the page:

<!--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" -->
<a href="javascript:myflowers.expandit('roses')">Select "Roses" tab</a>

instance.cycleit("next/prev") v2.1 method This method lets you move back or forth between tabs. It's very useful for creating "Next" and "Previous" pagination links. The method can be called anywhere on the page, such as inside a link on the page.

Parameter:

  • "next/prev": Enter either "next" or "prev" as its lone parameter.

Example:

Based on the following sample tabs layout:

<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>
</ul>

Here's how to create "forward" and "back" pagination links:

<a href="javascript:myflowers.cycleit('prev')">Back</a> | <a href="javascript:myflowers.cycleit('next')">Forward</a>

 

As a reminder, before calling this script, make sure you've added the prerequisite codes to the HEAD section of your page:

<link rel="stylesheet" type="text/css" href="tabcontent.css" />

<script type="text/javascript" src="tabcontent.js">

/***********************************************
* Tab Content script v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

Lets see 4 examples now that highlight different features of this script:

Example #1- Basic implementation

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 last tab

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">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">

<div id="country1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>

<div id="country2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="country3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="country4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

<p><b><a href="javascript:countries.expandit(3)">Click here to select last tab</a></b></p>
 

Example #2- Expanding of arbitrary DIVs on the page enabled

A tab can not only manipulate the visibility of the sub content it's assigned to, but also additional, arbitrary DIVs on the page if you wish. This is done using the "rev" attribute inside the tab link, and setting them to the ID(s) of the arbitrary DIVs on the page to also expand/contract:

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

<div id="flowernote" style="display:none; position:absolute; right: 30px; width:150px; height:150px; background-color:red; color:white">
Arbitrary DIV 1
</div>

<div id="flowernote2" style="display:none; position:absolute; right: 200px; width:80px; height:80px; background-color:black; color:white">
Arbitrary DIV 2
</div>

<div id="flowernote3" style="display:none; position:absolute; right: 30px; width:140px; height:140px; background-color:navy; color:white">
Arbitrary DIV 3
</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/dynamicindex17/tabcontent.htm">Tab Content script</a></li>
</ul>

<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>

<script type="text/javascript">

var myflowers=new ddtabcontent("flowertabs")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()

</script>

<p><b><a href="javascript:myflowers.expandit(2)">Click here to select 3rd tab</a></b></p>

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.

Make sure the code to intialize the Tab Content script appears after all DIVs specified using both the "rel" and "rev" attributes within the page source! Otherwise, an error will be thrown with the script complaining one of the DIVs specified doesn't exist.

Example #3- Using images for the tabs

You can completely customize the look of the tabs, such as changing them to image links. The script treats every link ("A") within the specified tab container as a potential tab link, so as long as your tabs are some form of links, it will work. For example:

<div id="photogallery">
<a href="#" rel="tcontent1" class="selected"><img src="tab1.gif" /></a>&nbsp;
<a href="#" rel="tcontent2"><img src="tab2.gif" /></a></li>&nbsp;
<a href="#" rel="tcontent3"><img src="tab3.gif" /></a>&nbsp;
<a href="#" rel="tcontent4"><img src="tab4.gif" /></a>
</div>

Example #4- Changing the location the script looks for a class="selected" declaration

By default, if you wish a tab to be automatically selected when the page loads, you add a class="selected" attribute inside that tab link ("A"). However, sometimes your CSS for the tabs may be structured in a way that would make things a lot easier for you if you can add class="selected" to the parent of the tab link, and still have the "default selected" feature work. An example would be tab links that are each wrapped around a DIV, and styling to the selected tab in your CSS is on the DIV element, not the link:

<div id="whatsnew" class="someclass">
<div class="selected"><a href="#" rel="tcontent1">Tab 1</a></div>
<div><a href="#" rel="tcontent2">Tab 2</a></div>
<div><a href="#" rel="tcontent3">Tab 3</a></div>
<div><a href="#" rel="tcontent4">Tab 4</a></div>

To tell the script to look for class="selected" on each tab link's parent container, you would call setselectedClassTarget() with the string parameter in red:

<script type="text/javascript">

var newcontent=new ddtabcontent("whatsnew")
newcontent.setselectedClassTarget("linkparent") //"link" or "linkparent"
newcontent.init()

</script>

Example #5- Customizing the look of your Tabs

If it's not already clear after reading examples #3 and #4, you have full flexibility in customizing the look of your tabs, as long as you remember that every link within your tab container will be scanned by the script for any special meaning (ie: does it have a "rel" attribute?), so don't put any non relevant links in there. Using the codes for Inverted Shift down menu in our CSS Horizontal Menus section, here is the result:

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

Table Of Contents

This script consists of an index page plus a supplementary page:

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post