So what is it?

mootabs consists of a tiny tiny script(2.8kb) and an easy-to-customize CSS file(less than 1kb).

With the help of mootools v1.00 you get an easy to use tab solution (like the one used on this very site!)

Eventually it might become much more, but my goal is to keep it as small as possible...
For now it is still quite usable, you can also add and remove tabs via JavaScript:
Add Tab

Another thing you can do is to activate a tab via JS, example:
Go to Download Tab

The look is fairly easy to customize via the CSS stylesheet, as long as you respect the classes that are already pre-defined, the rest(fonts and colors mostly) can be changed easily. The height and width of the tabs can be set at tab creation, as well as the transition effect when switching tabs(default one is bouceout).

How does it work?

It's really simple actually. Just include mootools like you usually do, then, include mootabs.js and link to mootabs.css stylesheet.

After that you need to create divs with specific ids and class and put a tiny piece of javascript in your page and you're done.

Here is an example of the HTML:

<div id="myTabs">
	<ul class="mootabs_title">
		<li><a href="#tab1" class="active">Tab 1</a></li>
		<li><a href="#tab2">Tab 2</a></li>
		<li><a href="#tab3">Tab 3</a></li>
	</ul>
	
	<div id="tab1" class="mootabs_panel active">
		Tab 1 Content
	</div>
	
	<div id="tab2" class="mootabs_panel">
		Tab 2 Content
	</div>
	
	<div id="tab3" class="mootabs_panel">
		Tab 3 Content
	</div>
</div>

As you can see it's quite simple, as long as you respect the classes. The main div (the one containing everything) can have any id...
You can decide which tab is active by adding the class "active" to both it's panel and it's title (as it is done with the first tab here) else, the first tab will be active by default

Now here is the javascript you will need to make this work:

var myTabs = new mootabs('myTabs', options);

//to add a tab via JS:
myTabs.addTab('label', 'anchorName', 'content');

//to remove a tab via JS:
myTabs.removeTab('anchorName');

The options for tab creations are:

Parameters:
id: the id of the main tab div (required)
Options:
width: an integer representing the width in pixels(default: 300)
height: an integer representing the height in pixels(default: 200)
changeTransition: an fx transition (default: Fx.Transitions.bounceOut)

The parameters for addTab are:

label: a string that will be used as the tab label (required)
anchorName: a string that will be used as the anchor (no '#') (required)
content: a string (can be html) that will be the tab content (required)

The parameters for removeTab are:

anchorName: the same anchor name you defined in addTab (required)

The parameters for setActive are:

anchorName: the same anchor name you defined in addTab (required)

Downloading Mootabs

You can download the latest version of mootabs here:
mootabs0.1.rar
It's a rar archive containint mootabs.js and mootabs.css

source

mootabs.js

var mootabs = new Class({
	
	initialize: function(element, options) {
		this.options = Object.extend({
			width:				300,
			height:				200,
			changeTransition:	Fx.Transitions.bounceOut
		}, options || {});
		
		this.el = $(element);
		this.id = element;
		this.tabPanels = $$('#' + this.id + ' ul.mootabs_title');
		this.tabPanel = this.tabPanels[0];
		
		this.el.setStyle('width', this.options.width + 'px');
		
		$$('#' + this.id + ' div.mootabs_panel').each(function(panel) {
			panel.setStyles({
				height: this.options.height + 'px',
				width: this.options.width + 'px'
			});
		}.bind(this));
		
		this.tabs = $$('#' + this.id + ' ul li a');
		
		
		this.tabs.each(function(tab) {
			tab.addEvent('click', function() {
				this.activate(tab);
			}.bind(this));
		}.bind(this));
		$$('#' + this.id + ' ul.mootabs_title').getFirst().addClass('active');
		$$('#' + this.id + ' div.mootabs_panel').getFirst().addClass('active');
	},
	
	activate: function(tab) {
		
		var linkName = tab.getProperty('href').split('#')[1];
		this.tabs.each(function(tab) {
			tab.removeClass('active');
		});
		tab.addClass('active');
		
		
		$$('#' + this.id + ' div.mootabs_panel').each(function(panel) {
			panel.removeClass('active');
		});
		
		
		$(linkName).addClass('active');
		$(linkName).effect('height', {duration:1000, transition: this.options.changeTransition}).start(0, this.options.height);
	},
	
	// public methods
	addTab: function(label, anchorname, content) {
		this.newTab = new Element('li');
		this.newPanel = new Element('div');
		
		this.newTab.setHTML('<a href="#' + anchorname + '">' + label + '</a>');
		this.newTab.addEvent('click', function() {
			this.activate(this.newTab.getFirst());
		}.bind(this));
		
		this.newPanel.id = anchorname;
		this.newPanel.addClass('mootabs_panel');
		this.newPanel.setStyles({
			height: this.options.height + 'px',
			width: this.options.width + 'px'
		});
		this.newPanel.setHTML(content);
		
		this.newTab.injectInside(this.tabPanel);
		this.newPanel.injectInside(this.el);
		this.tabs = $$('#' + this.id + ' ul li a');
	},
	
	removeTab: function(tab) {
		this.tabToRemove = tab;
		
		$$('#' + this.id + ' ul.mootabs_title').getChildren()[0].each(function(tabLi) {
			if(tabLi.getFirst().getProperty('href') == '#' + this.tabToRemove)
			{
				tabLi.remove();
			}
		}.bind(this));
		
		$(this.tabToRemove).remove();
		this.tabs = $$('#' + this.id + ' ul li a');
		this.activate($$('#' + this.id + ' ul.mootabs_title').getChildren()[0][0].getFirst())
	},
	
	setActive: function(tabAnchor) {
		this.tabToActivate = tabAnchor;
		$$('#' + this.id + ' ul.mootabs_title').getChildren()[0].each(function(tabLi) {
			if(tabLi.getFirst().getProperty('href') == '#' + this.tabToActivate)
			{
				this.activate(tabLi.getFirst());
			}
		}.bind(this));
	}
	
});