tabs.js

// this first line, and the matching ending line, are inserted by Protaculous
document.observe('dom:loaded', function(evt){
  // choose the parent box for the tabs, everything else is text within that box
  var box = $('item1');
  // choose the HTML tag that is used to create the tabs
  var tabs = box.select('h3');
  // choose the tags that are the content of the tab "bodies"
  var bodies = box.select('p,ul,table,dl');
  // CSS color (and you could do more styles, too) of the tabs
  var tabStyle = 'background-color:#ccc';
  // CSS color of the selected tab
  var tabSelected = 'background-color: #dd9'
  // first action is to give the tabs a tab-like style
  tabs.invoke('setStyle','display:inline; font-size:0.9em; padding:0.3em 1em; ' + tabStyle + '; margin:0 1px 0 0; cursor:pointer');
  // next, hide all the bodies, and give them a style
  bodies.each(function(elm){
    elm.hide();
    elm.setStyle('float:left; width:100%');
    // associate each body with its parent tab
    elm._tab = elm.previous('h3'); 
    // move each body to the bottom of the parent box
    box.insert({bottom:elm.remove()}); 
  });
  // give the first tab the "selected" style
  tabs.first().setStyle(tabSelected);
  // create the tab bar to hold the selected tab elements
  var bar = new Element('ul',{style:'list-style-type:none;padding:0;margin:-1.9em 0 0 -8px'});
  // insert the empty tab bar
  box.insert({top:bar});
  // loop over the tab elements, add them to the bar
  tabs.each(function(elm){
    bar.insert(elm.wrap('li'));
  });
  // style the tab elements
  bar.select('li').invoke('setStyle','list-style-type:none; display:inline;');
  // add the click handler, which shows and hides bodies based on tab clicks
  tabs.invoke('observe','click',function(evt){
    bodies.invoke('hide');
    tabs.invoke('setStyle',tabStyle);
    var tab = this;
    tab.setStyle(tabSelected);
    var bods = bodies.findAll(function(elm){
      return elm._tab == tab;
    }); 
    bods.invoke('show');
  });
  bodies.findAll(function(elm){
    return elm._tab == tabs.first();
  }).invoke('show');
});