Dynamic Drive DHTML Scripts- Tab Content Script

FF1+ IE5+ Opr7+

Tab Content Script

Author: Dynamic Drive

Note: Updated Feb 18th, 05'. Persistence can now either be "sitewide" or "local."

Description: We got our inspiration for this script from Yahoo's frontpage, which uses something similar to organize its search tools. Tab Content Script is a standards compliant, 2 level content script. Click on a tab, and additional content appears beneath it while contracting any previously open content. The script uses CSS to control all of its appearance, and lets you enter plain HTML for the tab contents, making customization a breeze.

Standards compliant, with all visual aspects of the script controlled via a central CSS definition.
Both tabs and content defined using plain HTML, making customization a breeze.
Due to 2) above, entire script search engine friendly and crawl-able.
Easily set which tab and content should initially be shown when the page first loads.
Customize the color of each tab easily, simply by inputting an optional HTML attribute theme="colorname" within the desired tab's HTML tag.
Optional code that instantly adds persistence to the tabs. With it present, going to another page or reloading browser won't cause the selected tab to be reset upon returning. (session only persistence). New! Persistence can now be either "sitewide" or "local." With the former, the tab content order is remembered across your entire site when you have multiple pages (within same domain) that all use this script.
Script works in IE5+ and NS6+, degrading well with the rest. Lower browsers will simply see the tabs and content all at once.

Sweet!

Demo (tab persistence enabled. Try reloading page):

Visit Dynamic Drive for free, award winning DHTML scripts for your site:

Visit our What's New section to see recently added scripts to our archive.

Visit our Hot section for a list of DD scripts that are popular to the visitors.

Directions

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

Select All

<style type="text/css">

#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}

#tablist li{
list-style: none;
display: inline;
margin: 0;
}

#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}

#tablist li a:link, #tablist li a:visited{
color: navy;
}

#tablist li a.current{
background: lightyellow;
}

#tabcontentcontainer{
width: 400px;
/* Insert Optional Height definition here to give all the content a unified height */
padding: 5px;
border: 1px solid black;
}

.tabcontent{
display:none;
}

</style>

<script type="text/javascript">

/***********************************************
* Tab Content script- (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
***********************************************/

//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]

////////Stop editting////////////////

function cascadedstyle(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)
}
}

var previoustab=""

function expandcontent(cid, aobject){
if (document.getElementById){
highlighttab(aobject)
detectSourceindex(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
if (aobject.blur)
aobject.blur()
return false
}
else
return true
}

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].style.backgroundColor=initTabcolor
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
}

function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}

function detectSourceindex(aobject){
for (i=0; i<tabobjlinks.length; i++){
if (aobject==tabobjlinks[i]){
tabsourceindex=i //source index of tab bar relative to other tabs
break
}
}
}

function do_onload(){
var cookiename=(typeof persisttype!="undefined" && persisttype=="sitewide")? "tabcontent" : window.location.pathname
var cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1
collecttablinks()
initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(cookiename).split("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
expandcontent(tabcontentid, tabobjlinks[whichtab])
}
else
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload


</script>

The CSS above allows you to control all visual aspects of the tabs and content in one central location. A variable within the DHTML script also lets you specify which tab and content should be initially selected when the page loads.

Step 2: Add the below HTML to where you wish the Tab Content to appear on the page:

Select All

<ul id="tablist">
<li><a href="http://www.dynamicdrive.com" class="current" onClick="return expandcontent('sc1', this)">Dynamic Drive</a></li>
<li><a href="new.htm" onClick="return expandcontent('sc2', this)" theme="#EAEAFF">What's New</a></li>
<li><a href="hot.htm" onClick="return expandcontent('sc3', this)" theme="#FFE6E6">What's Hot</a></li>
<li><a href="search.htm" onClick="return expandcontent('sc4', this)" theme="#DFFFDF">Search</a></li>
</ul>

<DIV id="tabcontentcontainer">

<div id="sc1" class="tabcontent">
Visit Dynamic Drive for free, award winning DHTML scripts for your site:<br />
</div>

<div id="sc2" class="tabcontent">
Visit our <a href="http://www.dynamicdrive.com/new.htm">What's New</a> section to see recently added scripts to our archive.
</div>

<div id="sc3" class="tabcontent">
Visit our <a href="http://www.dynamicdrive.com/hot.htm">Hot</a> section for a list of DD scripts that are popular to the visitors.
</div>

<div id="sc4" class="tabcontent">
<form action="http://www.google.com/search" method="get" onSubmit="this.q.value='site:www.dynamicdrive.com '+this.qfront.value">
<p>Search Dynamic Drive:<br />
<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="Search" /></p>
</form>
</div>


</DIV>

Optional tabs persistence feature add-on

If you wish the script to remember the last selected tab when the page is reloaded or returned to within a browser session, simply add the below script following the code of Step 1. We designed this persistence script to be completely modular in nature- you can add/remove the below script at will to enable/disable the persistence, respectively.

Select All

<script type="text/javascript">

//Dynamicdrive.com persistence feature add-on

var enablepersistence=true //true to enable persistence, false to turn off (or simply remove this entire script block).
var persisttype="local" //enter "sitewide" for Tab content order to persist across site, "local" for this page only

function get_cookie(Name) { 
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { 
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function savetabstate(){
var cookiename=(persisttype=="sitewide")? "tabcontent" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? tabsourceindex+"|"+previoustab+";path=/" : tabsourceindex+"|"+previoustab
document.cookie=cookiename+"="+cookievalue
}

window.onunload=savetabstate

</script>

Be sure to set the persistence feature to either "sitewide" or "local" in the above.

More information

The code of Step 2 contains the plain HTML that will render the Tab Content. Structurally it is broken up into two parts:

1) The tabs:

<ul id="tablist">
<li><a href="http://www.dynamicdrive.com" class="current" onClick="return expandcontent('sc1', this)">Dynamic Drive</a></li>
<li><a href="new.htm" onClick="return expandcontent('sc2', this)" theme="#EAEAFF">What's New</a></li>
</ul>

Each tab is implemented as a list item (<li>). To add more tabs, just add additional <li> items, but all contained with the master <ul> tag. The code in red is the optional "theme" attribute, which you can add within any tab link to give it a different theme color than that of the default, controlled by the CSS in code of Step 1.

2) The tab contents:

<DIV id="tabcontentcontainer">

<div id="sc1" class="tabcontent">
Visit Dynamic Drive for free, award winning DHTML scripts for your site:<br />
"
</div>

<div id="sc2" class="tabcontent">
Visit our <a href="http://www.dynamicdrive.com/new.htm">What's New</a> section to see recently added scripts to our archive.
"
</div>

</DIV>

There exists a master DIV here (with ID="tabcontentcontainer"). All of your tab contents need to fall within this div. As shown, each tab content should also be wrapped inside its own DIV tag (ID="scx", class="tabcontent"). For each content you add, be sure to increment the ID attribute, such as "sc1", "sc2", "sc3" etc. This is the ID you'll use to pass into the menu tabs in 1) to determine which tab displays which content.

Adding a line break between tabs

if you have lots of tab links, you can get them to appear on separate lines, by adding a divider:

<ul id="tablist">
<li><a href="#" onMouseover...>Google</a></li>
<li><a href="#" onMouseover...>Yahoo</a></li>
<li><a href="#" onMouseover...>MSN</a></li>
<div style="margin-bottom: 8px"></div>
<li><a href="#" onMouseover...>News.com</a></li>
<li><a href="#" onMouseover...>Dynamic Drive</a></li>
</ul>

Recent change log

Updated Feb 18th, 05. Enhanced persistence feature with "sitewide" or "local" settings.
Updated Sept 27th, 04 for optional persistence feature.

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