Tabbed Content Areas

There are three separate components for using this javascript-based tabbed content area on your site.

The first is the javascript:

<script type="text/javascript">
//<![CDATA[
/* getElementsByClassName by some guy with a yeallowish website. */
function getElementsByClassName(oElm, strTagName, strClassName){
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\-/g, "\\-");
    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
    var oElement;
    for(var i=0; i<arrElements.length; i++){
        oElement = arrElements[i];      
        if(oRegExp.test(oElement.className)){
            arrReturnElements.push(oElement);
        }
    }
    return (arrReturnElements);
}

if ( typeof(unl) === 'undefined' ) {
	var unl = {};
}
/*
Create tab menu
*/

unl.tabMenu = {
	
	init: function(){
		var arr = [];
		var el = document.getElementById('maincontent');
		var targetUL = document.getElementById('bulletin-nav-nojs');
		var targetA = targetUL.getElementsByTagName('a');
		targetUL.id = 'bulletin-nav';		
		
		if (window.location.hash) {
            var hash = window.location.hash;
        } else {
            var hash = false;
        }
		
		for (var i=0, j = arguments.length; i<j; i++) {
			 arr[i] = document.getElementById(arguments[i]);
			 targetA[i].id = 'bulletinLINK-'+arguments[i];
			 targetA[i].onclick = unl.tabMenu.hideShow;
			 if (targetA[i].href.match(hash)) {
                 arr[i].style.display = 'block';
			     targetA[i].className = 'bulletin-selected';
			 } else {
                 if (i === 0 && hash === false){
                    arr[0].style.display = 'block';
                    targetA[0].className = 'bulletin-selected';
                 } else {
                    arr[i].style.display = 'none';
                 }
             }
		}		
	},
	
	//This function handles the onclick event of the tab. 
	//Show current selection, Hide others.
	hideShow: function(){				
		var ulID = document.getElementById('bulletin-nav');
		var currentDivID = document.getElementById(this.id.substring(13));
		var resetSel = getElementsByClassName(ulID, "a", "bulletin-selected");
		
		for (var c=0, k=resetSel.length; c<k; c++){
			var otherDivID = document.getElementById(resetSel[0].id.substring(13));
			otherDivID.style.display='none';
			resetSel[c].className = 'bulletin-non';
		}
		
		this.className = 'bulletin-selected';
		currentDivID.style.display = 'block';
	}
	
}
	
/* calling external alert javascript every 30 seconds */	
wraphandler.addEvent(window,"load",	function(){
	unl.tabMenu.init('tab1','tab2','tab3','tab4');
});

//]]>
</script>

Within the javascript, the only place you need to edit is the unl.tabMenu.init section (the very last line of code), where you specify how many tabs you want.

The second part is the actual html code:

<div id="bulletin-nav-nojs">
<ul>
<li><a href="#tab1name"><span>text or graphic for tab 1</span></a></li>
<li><a href="#tab2name"><span>text or graphic for tab 2</span></a></li>
<li><a href="#tab5name"><span>text or graphic for tab 3</span></a></li>
<li><a href="#tab4name"><span>text or graphic for tab 4</span></a></li>
</ul>
</div>

<div id="tab1" class="bulletin-tabs">
Content area for tab 1
</div>


<div id="tab2" class="bulletin-tabs">
Content area for tab 2
</div>


<div id="tab3" class="bulletin-tabs">
Content area for tab 3
</div>


<div id="tab4" class="bulletin-tabs">
Content area for tab 4
</div>

The items in the unordered lists are what will display for the actual tabs, while the individual divs hold the corresponding information for each.

Lastly, you'll need the CSS for styling the tabs and content areas:

<style type="text/css">
/**
 * BULLETIN Navigation
 */

#bulletin-nav {

	width:100%;
	line-height:normal;	
    }
#bulletin-nav:after {content: ".";display: block;clear: both;height:0;visibility: hidden;}
#bulletin-nav ul {
	margin:0 0 0 0px;
	padding:0 0px 0 0;
	list-style:none;
	float:left;
	
    }
#bulletin-nav li {
    display:inline;
    margin:0;
    padding:0;
	
    }
#bulletin-nav a {
    float:left;
	margin:0px 0px 0px 0px;
    text-decoration:none;
	color:#D9D9D9;
	background:#FFFFFF;
    }
#bulletin-nav a span {
    float:left;
    display:block;
		text-align:center;    
    padding:8px 7px 10px 6px;
		
	font-size:11px;
	color:#666666;

    }
		
.bulletin-tabs {
background-color:#E1EBF0; 
padding:10px;
border-bottom-style:solid; 
border-bottom-color: #CC0000; 
border-bottom-width: 2px;
margin-right:4px;
}		
		
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#bulletin-nav a span {float:none;}
/* End IE5-Mac hack */
#bulletin-nav a.bulletin-selected{font-size:11px; color:#000000;background-color:#E1EBF0; text-align:center; border-top-style: solid; border-top-color: #CC0000; border-top-width:1px;  }


#bulletin-nav a span:hover{text-decoration:underline;}
#bulletin-nav a span:active{color:#333333;}
#bulletin-nav a span:visited{color:#666666;}

#bulletin-nav-nojs span img{margin-right:3px;}

</style>

I've left some very basic styles in here for illustrative purposes, but the sky is the limit!