Skip to content

Instantly share code, notes, and snippets.

Created Feb 16, 2013
What would you like to do?
An old tab script
File: TabHelper class
Version: 1.0
Desc: This class helps to build tabs on a page using lightweight markup and two HTML classes.
Tested in IE6+, Firefox 1.0+ and Opera 9+. Needs to be tested in Safari 1.3+
Requires: /pages/v4/script/dhtml_lib.js
Use: To use the functions found in this file, start with simple markup:
<div class="tabs">
<[h3 or another tag] class="tab" id="[id name]">[Heading]</h3>
<p>Content here in whatever tags you want. Feel free to nest infinitely.</p>
<[h3 or another tag] class="tab" id="[another id]">[Another Heading]</h3>
<li>More content</li>
<li>In any format</li>
new TabHelper([param]) allows you to specify which tab index you want open by default.
The default if not specified is the first tab, or 0. If the index doesn't exist, all of them will be hidden
If you want an easy default implementation, just add a window load event to call TabHelper_AutoInit()
Then write CSS to style the tabs. Don't forget to specify display property for the class ".tab-hidden".
Author: Eric Shepherd
Date: December 2006
Methods: The following methods are in this class.
init(container element)
Builds an unordered list from the headings in the container element
Builds an array of content sections from the content under each heading
Inserts the list into the parent element
Inserts the sections into the parent element
Sets the default active tab per the parameter (if any) passed into the constructor
findTabHeadings(container element)
Returns a node list of any elements with a class of "tab" inside the container
buildList(container element)
Parses through container looking for tags with class "tab"
Loops through these tags, pulling out text and pushing into new <li> elements
Returns an unordered list of these tab headings with the id of the heading
Adds event listener to the newly created links on each tab (calls showHide)
buildTabContainers(container element)
Creates a new sections array
Parses through element, beginning at heading and pushing nextSiblings into the array
Loop stops when another heading or the end of the container section is reached
showHide(link, container element, event)
Gets the anchor link which was clicked, adds hidden class to all tab sections
Returns the <a> tag from storage to the previously selected tab
Removes hidden class from selected tab, activates the tab to remove the <a> tag
Cancels default link action
setDefaultActiveTab(container element)
Sets the first tab to be active by retrieving the tab and calling DomHelper.ActivateElement
deactivateElements(container element)
Calls DomHelper.DeactivateElement for all list items which are activated in the tab set
Version History:
0.9 EBS Created
1.0 EBS Launch version, tested and implemented
// Constructor
// Pass in the tab number which should be active
function TabHelper(openDefault)
this._openTab = (openDefault != null) ? openDefault : 0;
this._tabKeyword = 'tab';
this._tabHiddenClass = 'tab-hidden';
this._tabListClass = 'tab-list';
this._activeClass = 'active';
// Public Accessors
TabHelper.prototype.SetOpenTab = function(value) {
this._openTab = value;
TabHelper.prototype.SetTabKeyword = function(value) {
this._tabKeyword = value;
TabHelper.prototype.SetTabHiddenClass = function(value) {
this._tabHiddenClass = value;
TabHelper.prototype.SetTabListClass = function(value) {
this._tabListClass = value;
TabHelper.prototype.SetActiveClass = function(value) {
this._activeClass = value;
// Storage variable for activated tab link to chill until needed again
TabHelper.prototype.tabStorage = null;
// Function: init
// Builds the unordered list of tab options and inserts into the document
// Parameters:
// parent - the HTML element that contains the tab content
// Returns:
// void
TabHelper.prototype.init = function(parent)
if (!SupportTest.hasDom) return;
thisList = this.buildList(parent);
sections = this.buildTabContainers(parent);
for (var i=0; i<sections.length; i++) {
// Function: findTabHeadings
// Finds the headings in the HTML and returns an array of elements
// Parameters:
// parent - the HTML element that contains the tab content
// Returns:
// void
TabHelper.prototype.findTabHeadings = function(parent)
return DomHelper.GetElementsByClassName(this._tabKeyword, null, parent);
// Function: buildList
// Accepts an element, calls findTabHeadings, and returns an unordered list with nav items
// Parameters:
// parent - the HTML element that contains the tab content
// Returns:
// an unordered list element containing the navigation items
TabHelper.prototype.buildList = function(parent)
// get each item with class "tab" in the current section
var headings = this.findTabHeadings(parent);
// create list and items array
var list = document.createElement('ul');
list.className = this._tabListClass;
// loop through headings, push text into list
for (var i=0; i<headings.length; i++) {
var text = headings[i].firstChild.nodeValue;
var itemId = headings[i].id.length > 0 ? headings[i].id : '';
var newLi = document.createElement('li');
// create the link and text node
var newLink = document.createElement('a');
var newText = document.createTextNode(text);
newLink.setAttribute('href', '#' + headings[i].id);
// append text to link, set attributes and append the whole thing into the new list item
var thisId = this._tabKeyword + '-' + headings[i].id;
newLi.setAttribute('id', thisId)
// add the event
var thisReference = this;
EventHelper.AddEvent(newLink, 'click', ptr = function(e) { thisReference.showHide(this, parent, e); }, false);
// push the new list item into the ul
return list;
// Function: buildTabContainers
// Finds the tab headings, parses through them and creates divs with meaningful ids while removing the headlines
// Parameters:
// parent - the HTML element containing the tab content
// Returns:
// an array of div elements with the tab content
TabHelper.prototype.buildTabContainers = function(parent) {
// get each item with class "tab" in the current section
var headings = this.findTabHeadings(parent);
// array to hold all sections
sections = new Array();
// loop through headings
for (var i=0; i<headings.length; i++) {
// create new div and assign to array slot
var newDiv = document.createElement('div');
sections[i] = newDiv;
// grab the node name of the heading
var theNodeName = (headings[i].nodeName);
// cycle through, grab nextSibling and push into div in array slot
while (headings[i].nextSibling && headings[i].nextSibling.nodeName != theNodeName) {
// get rid of heading after assigning id to the new div, add class of 'tab' to new sections
var thisId = headings[i].id;
sections[i].id = thisId;
DomHelper.AddClassName(sections[i], this._tabKeyword);
// hide all sections
if (this._openTab != i) {
DomHelper.AddClassName(sections[i], this._tabHiddenClass);
return sections;
// Function: showHide
// Shows and hides the tab divs based on link click events
// This method would have to be extended/overwritten to include an effect rather than a hidden class
// Parameters:
// theLink - the anchor element on each tab which receives the click event
// parent - the HTML element containing the tab content
// e - the click event on the tab
// Returns:
// void
TabHelper.prototype.showHide = function(theLink, parent, e)
var theIds = theLink.toString().split('#');
var section = theIds[1];
var activatedElement = document.getElementById(section);
// add hidden class name to all elements
var headings = this.findTabHeadings(parent);
for (i=0; i<headings.length; i++) {
DomHelper.AddClassName(headings[i], this._tabHiddenClass);
// remove hidden class on active element and cancel following link
DomHelper.RemoveClassName(activatedElement, this._tabHiddenClass);
// deactivate all and then activate the element
var tabId = this._tabKeyword + '-' +;
var newTab = document.getElementById(tabId);
this.tabStorage = DomHelper.ActivateElement(newTab, this.tabStorage);
// Function: setDefaultActiveTab
// Sets the default active tab per index specified in constructor
// Parameters:
// parent - the HTML element containing the tab content
// Returns:
// void
TabHelper.prototype.setDefaultActiveTab = function(parent)
var list = parent.getElementsByTagName('ul')[0];
var items = list.getElementsByTagName('li');
for (var i = 0; i<items.length; i++) {
if (i == this._openTab) {
this.tabStorage = DomHelper.ActivateElement(items[i], this.tabStorage);
// Function: deactivateElements
// Deactivates the active tab, placing the link into the static storage property
// Parameters:
// parent - the HTML element containing the tab content
// Returns:
// void
TabHelper.prototype.deactivateElements = function(parent)
var list = parent.getElementsByTagName('ul')[0];
var items = list.getElementsByTagName('li');
for (var i=0; i<items.length; i++) {
if (items[i].className.match(this._activeClass)) {
DomHelper.DeactivateElement(items[i], this.tabStorage);
// Function: AutoInit
// Static auto-initializer. Either call this function on window load,
// or instantiate the TabHelper manually if you need more control.
// Auto-initializes any number of tab sets on a page
// Parameters:
// none
// Returns:
// void
TabHelper.AutoInit = function()
// get all elements with class of "tabs"
var elements = DomHelper.GetElementsByClassName('tabs');
// create new array to hold instances
instances = new Array();
// loop through all elements with "tabs" class
for (var i=0; i<elements.length; i++) {
// create new TabHelper instance at iterator location
instances[i] = new TabHelper();
// run init function for that particular instance, passing it the element at the iterator location
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment