Rob Newman :: Realtime data-driven web-based software development and geoscience visualization :: How To :: Preserving state on show and hide tabs using cookies

Bobby's original script did not have to account for this updating and need to preserve the selected tab, so I thought about the best way to do this in a web browser. The solution I came up with was to insert extra Javascript into Bobby's code that creates a cookie on the client-side that notes which tab has been selected. Then on a page refresh, the cookie is read and the respective tab highlighted.

Javascript Guru Peter Paul Koch has a great article about how to dynamically create, read and destroy cookies using Javascript. I believe he attributes the original script to Scott Andrew.

So, the only thing I did was to combine these two scripts. Code is below. Hopefully I have left the copyright notices intact correctly:

tabs.js

// Modified from http://www.bobbyvandersluis.com/articles/unobtrusiveshowhide.php
// Cookie functions, modified from http://www.quirksmode.org/js/cookies.html
 
if (document.getElementById && document.getElementsByTagName && document.createElement) {
	document.write('<style type="text/css" media="all">@import "tabs.css" ; </style>');
	window.onload = initShowHide;
}
 
function initShowHide() {
	if (document.getElementById && document.getElementsByTagName && document.createTextNode) {
		var myTabs = new Array() ;
		var myCookie = read_cookie_tab('tab') ;
		var toggle = document.getElementById('tabSelector');
		var as = toggle.getElementsByTagName('a');
		hide();
		for( var i = 0; i < as.length; i++ ) {
			myTabs.push( as[i].href.match(/#(\w.+)/)[1] ) ;
			as[i].onclick = function() {
				show(this);
				return false;
			}
		}
	}
	// Check to see if a cookie is set, or else activate first tab by default
	for( var j = 0; j < myTabs.length; j++ ) {
		if( myCookie == myTabs[j] ) {
			show( as[j] ) ;
			return ;
		}
	}
	show( as[0] ) ;
}
 
function show(s) {
	hide();
 
	// Erase the current cookie
	erase_cookie_tab('tab');
 
	var id = s.href.match(/#(\w.+)/)[1];
 
	// Set a cookie to ensure reload keeps tab focus
	set_cookie_tab('tab',id,1) ;
 
	document.getElementById(id).style.display = 'block';
 
	// Try to get a reference to an element with the id 'current' (a previously active tab header)
 	var oldCurrent = document.getElementById('current');
 
	// If this element exists, remove its ID attribute
	if (oldCurrent) oldCurrent.removeAttribute('id');
 
	// Add the ID attribute with value 'current' to the newly active tab header (LI element)
	s.parentNode.setAttribute('id', 'current');
}
 
function hide() {
	var toggleable = document.getElementById('tabbedContent').getElementsByTagName('div');
	for (var i = 0; i < toggleable.length; i++) {
		toggleable[i].style.display = 'none';
	}
}
 
function set_cookie_tab(name,value,days) {
	if( days ) {
		var date = new Date() ;
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = " ; expires="+date.toGMTString();
	}
 
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/" ;
}
 
function read_cookie_tab( name ) {
	var cookieName = name + "=" ;
	var ca = document.cookie.split( ';' ) ;
	for( var i=0; i<ca.length; i++ ) {
		var c = ca[i];
		while( c.charAt(0)==' ' ) c = c.substring( 1,c.length ) ;
		if( c.indexOf( cookieName ) == 0 ) return c.substring( cookieName.length,c.length ) ;
	}
}
 
function erase_cookie_tab(name) {
	set_cookie_tab(name,"",-1);
}

tabs.css

#tabbedNav {
	float: left;
	width: 100%;
	font-size: 93%;
	line-height: normal;
}
#tabbedNav ul {
	margin: 0;
	padding: 10px 10px 0;
	list-style: none;
	white-space: nowrap ;
}
#tabbedNav li {
	float: left ;
	background-color: #FFF ;
	margin: 0 ;
	padding: 0 ;
	margin-right: 10px ;
	list-style: none;
	border: 1px solid #333 ;
}
#tabbedNav a {
	float: left;
	display: block;
	width: .1em;
	padding: 5px 15px 4px ;
	font-weight: bold;
	color: #8B7355 ;
	text-decoration: none ;
}
#tabbedNav > ul a {
	width: auto;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabbedNav a {
	float: none;
}
/* End IE5-Mac hack */
#tabbedNav a:hover {
	color: #900 ;
	border: none ;
}
#tabbedNav #current {
	background-color: #FFC ;
}
#tabbedContent {
	padding: 10px ;
	border: 1px solid #333 ;
	margin: 10px ;
}
#tabbedContent h3 {
	margin-top: 2.0em ;
}

Working code example

If you select any of the tabs below they show the selected content and hide the content of the other divs. If you hit reload then the previously selected tab will retain it selection (preserve state). This will only work if your browser is configured to accept cookies.

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5