Jake’s Amazing Tabbed Content System

Edit 2: I’ve posted version 3 now. It’s better.

Edit: I’ve replaced the code below with Version 2. Now includes removable/re-addable tabs, nicer styling, uses one array rather than two.
Still to do: Make it write the tabs out from an array. Either that or integrate it with PHP so you only have to write the content once (in one place) and it will do the rest.

This was inspired by the tabs in phpMyAdmin which look pretty good but require a page load on when you change tabs. This makes sense in phpmyadmin (because it reloads datasets etc and keeps things up to date), but I thought it would be nice to have a smaller scale system. It should work well for multipart forms, sections of a small website, etc. I wouldn’t recommend it for large amounts of content but then again I haven’t tested that out and it seems to work quite swiftly as it is, so give it a shot and let me know.

Well, that was easier than I thought. It’s pretty basic, but you get the idea. Any ideas/comments/suggestions welcome.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>TABS!</title>
	<script type="text/javascript"><!--
		//************************************************************
		// Jakes Javascript Tab System
		//************************************************************
		
		// Edit this array when adding/editing your tabs. Format is ["id of tab", "id of tab content"]
		var tabsarray = new Array(																// Define tabs array
			["tab1", "tabcontent1", 1, "Tab 0"], 
			["tab2", "tabcontent2", 1, "Tab 1"], 
			["tab3", "tabcontent3", 1, "Tab 2"], 
			["tab4", "tabcontent4", 1, "Tab 3"], 
			["tab5", "tabcontent5", 1, "Tab 4"]
		)
		
		function showTab(id){
			var size = tabsarray.length;														// get number of tabs
			tabsarray[id][2] = 1;																// set tab visibility to 1 (keeps track of which tabs are visible)
			for(i=0;i<size;i++){																// for each tab in array
				document.getElementById(tabsarray[i][1]).style.display = 'none';				// hide the tab
				document.getElementById(tabsarray[i][0]).style.background = '#BBBBBB';			// set tab colour to "deselected" colour
				document.getElementById(tabsarray[i][0]).style.borderBottomColor = '#000000';	// set border-bottom to black
			}
			document.getElementById(tabsarray[id][0]).style.display = 'block';					// show active tab
			document.getElementById(tabsarray[id][1]).style.display = 'block';					// show active tabcontent
			document.getElementById(tabsarray[id][0]).style.background = '#FFFFFF';				// set active tab to "selected" colour
			document.getElementById(tabsarray[id][0]).style.borderBottomColor = '#FFFFFF';		// set border-bottom to white - appears to join tab and tabcontent - leaves 1 white pixel in IE!!
			showHidden();
		}
		
		function removeTab(id){
			document.getElementById(tabsarray[id][0]).style.display = 'none'; 					// hide tab
			document.getElementById(tabsarray[id][1]).style.display = 'none'; 					// hide tab content
			tabsarray[id][2] = 0;																// set visibility in array to 0
			var size = tabsarray.length;
			var x = 0;
			var foundid = 'x';
			var tempvis;
			while (x<size && foundid == 'x'){
				tempvis = tabsarray[x][2];
				if (tempvis == 1){
					foundid = x;
				}
				x++;
			}
			if (foundid != 'x'){
				showTab(foundid);
			}
			showHidden();
		}
		
		function showHidden(){
			var size = tabsarray.length;
			var count = 0;
			var outstr = '<h1>Hidden tabs:<\/h1>';
			for (i=0;i<size;i++){
				if (tabsarray[i][2] == 0){
					outstr += '<a href="#" onclick="showTab(' + i + ')">' + tabsarray[i][3] + '<\/a><br />';
					count += 1;
				}
			}
			if (count < 1){
				document.getElementById('hiddentabs').style.display = 'none';
				document.getElementById('hiddentabs').innerHTML = '';
			} else {
				document.getElementById('hiddentabs').style.display = 'block';
				document.getElementById('hiddentabs').innerHTML = outstr;
			}
			
		}
		//**********************************************************************
		-->
	</script>
	<style type="text/css">
		body{
			background-color: #DDDDDD;
		}
		#tabcontainer{
			border: 0px solid blue;
		}
		#tabheader{
			position: relative;
			border: 0px solid red;
			height: 27px;
			z-index: 5;
		}
		#tabbody{
			position: relative;
			border: 0px solid green;
			background-color: #FFFFFF;
			z-index: 1;
		}
		.tab{
			border: 1px solid black;

			background-color: #BBBBBB;
			float: left;
			height: 20px;
			min-width: 50px;
			margin-right: -1px;
			padding: 3px;
		}
		.tabcontent{
			border: 1px solid black;
			height: 300px;
			padding: 10px;

		}
	</style>
</head>

<body>
<div id="tabcontainer">
	<div id="tabheader">
		<div class="tab" id="tab1" onclick="showTab(0)" style="background-color:#FFFFFF;border-bottom:1px solid white;">Tab 0</div>
		<div class="tab" id="tab2" onclick="showTab(1)">Tab 1 </div>
		<div class="tab" id="tab3" onclick="showTab(2)">Tab 2</div>
		<div class="tab" id="tab4" onclick="showTab(3)">Tab 3</div>
		<div class="tab" id="tab5" onclick="showTab(4)">Tab 4</div>
	</div>
	<div id="tabbody">
		<div class="tabcontent" id="tabcontent1">
			<h1>Here's some content!</h1>
			<a href="#" onclick="removeTab(0)">Remove This Tab</a><br /><br />
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet quam sem. Aliquam tincidunt orci a massa tempor consequat. Sed ut ipsum at magna lobortis interdum. Quisque porttitor, nisl vel elementum ultrices, leo est pulvinar nunc, a porta nibh nibh nec lectus. Integer sit amet purus leo, eu accumsan ante. Proin venenatis vehicula consequat. Nullam porta leo nec tortor feugiat lacinia eget a erat. Donec et nisl nunc, sagittis fermentum elit. Maecenas feugiat lectus ac metus laoreet sed eleifend enim dapibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eu neque eu est vulputate porta vitae sed augue. Ut ut eros nec risus vulputate mollis. Sed scelerisque auctor lacus in aliquet. Donec pellentesque nunc sit amet leo dapibus et elementum nulla dapibus. Morbi dolor lacus, mattis vestibulum consectetur ac, vehicula non massa. Nullam in placerat quam. Sed fermentum massa vitae mauris tempor sit amet accumsan leo aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
		</div>
		<div class="tabcontent" id="tabcontent2" style="display:none;">
			<h1>More content...</h1>
			<a href="#" onclick="removeTab(1)">Remove This Tab</a><br /><br />
			Mauris aliquet, orci ut auctor pellentesque, mauris diam sollicitudin arcu, vel ultricies urna est sed velit. Maecenas non enim purus. Phasellus non orci ornare tortor pretium euismod at nec magna. Proin gravida sem sed tortor commodo malesuada. Duis leo felis, iaculis sit amet ornare lacinia, pellentesque nec mauris. In lacus urna, facilisis id porttitor vitae, feugiat ut urna. Donec et nibh nec quam placerat tincidunt vel ut velit. Sed facilisis adipiscing risus porta accumsan. Integer vitae justo nibh, id fringilla nibh. Ut eget tristique justo. Fusce in nisl diam, vel tempor elit. Mauris at nisi libero, ut lacinia augue. Praesent eget lacus et nisl auctor tristique. Integer scelerisque, mi nec mollis posuere, lorem lectus tincidunt augue, et lacinia elit risus mattis dolor. Sed condimentum lacus ante. 
		</div>
		<div class="tabcontent" id="tabcontent3" style="display:none;">
			<h1>the content continues</h1>
			<a href="#" onclick="removeTab(2)">Remove This Tab</a><br /><br />
			Sed vitae arcu non sapien congue pretium egestas id ligula. Vestibulum varius semper magna quis vestibulum. Aenean congue dictum lacus vel consectetur. Donec pellentesque neque suscipit nibh consectetur vitae fermentum nunc iaculis. Suspendisse ac odio justo, id scelerisque eros. Etiam velit nisi, consequat eget lacinia ut, convallis in turpis. Aliquam ut nisi eros. Proin at nunc erat. Pellentesque lacinia semper velit id accumsan. Suspendisse potenti. Sed scelerisque, ipsum id commodo consequat, eros nisl sagittis nunc, vel laoreet urna risus nec sem. Nunc ultrices dignissim felis, et fermentum felis ultricies sed. Sed eget aliquam justo. 
		</div>
		<div class="tabcontent" id="tabcontent4" style="display:none;">
			<h1>Content 4: A New Tab</h1>
			<a href="#" onclick="removeTab(3)">Remove This Tab</a><br /><br />
			Integer viverra dignissim dolor vitae ultrices. Donec porttitor tincidunt mauris, at elementum orci tincidunt ut. Pellentesque ac orci diam. Nullam dolor sem, semper sed faucibus et, interdum eget tortor. Cras sed odio at enim vulputate mollis vel in mauris. Sed sagittis vulputate molestie. Vivamus scelerisque feugiat elementum. Aenean ante eros, lacinia ut dictum ac, feugiat sit amet mauris. Vivamus pulvinar, tellus quis semper pharetra, diam orci sodales sapien, viverra porttitor sem felis ac justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus nunc eros, feugiat ac fringilla faucibus, lacinia sed eros. Donec placerat ante at velit lacinia bibendum fringilla ligula facilisis. Aenean ligula arcu, aliquam quis vehicula ac, interdum a turpis. Etiam iaculis fermentum nibh, sed congue ante eleifend vel. Aenean cursus sagittis elit, nec fermentum mi imperdiet non. 
		</div>
		<div class="tabcontent" id="tabcontent5" style="display:none;">
			<h1>I've got a bad feeling about this.</h1>
			<a href="#" onclick="removeTab(4)">Remove This Tab</a><br /><br />
			Etiam est ante, egestas non aliquet eu, placerat consectetur dolor. Aenean bibendum ultricies metus, eu cursus dui mollis et. Etiam non nulla in ante dictum venenatis id eu neque. Etiam eu ipsum a enim venenatis ultrices et ut metus. In hac habitasse platea dictumst. Maecenas justo neque, faucibus sit amet porta ut, tincidunt ut mi. Nullam eget auctor nulla. Etiam urna lorem, pretium ac vulputate et, ultrices in nisl. Phasellus sodales quam vel nunc pellentesque at congue lorem lobortis. Praesent pulvinar egestas tincidunt. Nam ac augue non elit tincidunt posuere at eleifend massa. Aenean fermentum arcu nec urna semper semper. Duis quis lorem eu tellus accumsan tempor. Curabitur in molestie dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean vitae justo quis felis hendrerit lobortis ac sed tortor. Cras quis erat massa. Mauris adipiscing vehicula lectus a mattis. Fusce in dui risus. Proin id nisi non enim porttitor sodales vitae vitae nulla. 
		</div>
	</div>
	<div id="hiddentabs">
		nothing here
	</div>
</div>
</body>

</html>
Advertisements

About Mr Chimp

I make music, draw pictures, browse the internet, programme, and make sweet, sweet cups of tea until the early hours.
This entry was posted in Uncategorized and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s