Simple JavaScript Tab View based on Prototype JS

A fairly simple prototype based tab view function which renders simple html lists into navigable tabbed views of content.
created by on 2008-08-22

Create a Simple Tab View just like this one with four simple steps:

Screenshot of TabView created from html markup code (Keywords: Tabview, JavaScript, Screenshot, Development)

How does Simple Tabview work?

It turns a simple html ul-list into a navigable tabview by surrounding it with a container-element and inserting tab-headers for each <li>-entry:

Tabview DOM-Layout schema (JPEG) illustrates how the tabview script turns a simple &lt;ul&gt;-list into a navigable tabview (Keywords: Tabview, Screenshot, Development)

Step 1: Include all necessary files into your page**

Link the files in the <head> of your page:

<script src="prototype.js" type="text/javascript" />
<script src="tabview.js" type="text/javascript" />
<link href="tabview.css" rel="stylesheet" type="text/css" />

Note: Keep in mind that the prototype frameworks is quite big, so this only makes sense to use this solution if you load prototype.js anyways!

Step 2: Create a html ul- or ol-list which shall be transformed into a tabview

Create a <ul>-list and apply the css class tab-collection to it:

<ul class="tab-collection">

Add tabs to the tabview by adding simple list elements

<li title="tab headline">...</li>

with a title attribute which defines the headline for each tab:

<li title="Tab1 Headline"> Yada Yada Tab 1</li>
<li title="Tab 2 Headline"> Lorem ipsum Tab 2</li>
<li title="..."> ... </li>
<li title="Tab X Headline"> Some Content</li>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="">
	<title>Tabview - Demo</title>
	<script src="prototype.js" type="text/javascript"></script>	
	<script src="tabview.js" type="text/javascript"></script>
	<link href="tabview.css" rel="stylesheet" type="text/css" />

<body id="body">

 * Version: 1.0 
 * 2008-08-20
 * based on protoype framework
 * Author: Andreas Koch
 * files: tabview.css, prototype.js, tabview.js

<ul class="tab-collection">
	<li class="tab" title="Tab1">
    <h1>Tab 1</h1>
    <img src="" border="0">
	<li class="tab" title="Tab2">
    <h1>Tab 2</h1>
    <img src="" border="0">    
	<li class="tab" title="Tab3">
    <h1>Tab 3</h1>
    <img src="" border="0">

<script type="text/javascript">
	UI.Tabview.init('body', { width: '500px' });


Step 3: Initialize the tabview

Add this JavaScript block at the bottom of your website.

The JavaScript method UI.Tabview.init(root,options) will render each tab collection which is a child element of root into a tabview.

Example function call UI.Tabview.init():

		width: '500px',
		activeColorBackground: 'black',
		activeColorText: 'white',
		inactiveColorBackground: 'white',
		inactiveColorText: 'black'

Note: The options are not mandatory - If they are not set, the function will use default values.

Step 4: View the result

A <ul>-list like this will look something like the screenshot below (demo: tabview-demo.html):

<ul class="tab-collection">
	<li class="tab" title="Tab1">
		<h3>Tab 1</h3>
		<img src="image1.jpg" border="0" />

	<li class="tab" title="Tab2">
		<h3>Tab 2</h3>
		<img src="image2.jpg" border="0" />

	<li class="tab" title="Tab3">
		<h3>Tab 3</h3>
		<img src="image3.jpg" border="0" />

Screenshot of a Tabview in action:

Screenshot of TabView created from html markup code (Keywords: Tabview, JavaScript, Screenshot, Development)

Customize the Look & Feel

Feel free to modify the look of your tabview by changing some of the colors, the padding or text style or even the JavaScript-Function. There is no magic behind and the layout should stay intact as long as you don’t mess with the the float, position, width or margin-attributes.

Known Limitations
If you have too many tabs it will look crappy.

The tabview.js script works with

But see for yourself at

- Andreas

Fork allmark on GitHub