Skip to content

Instantly share code, notes, and snippets.

@walterdavis
Created August 14, 2011 20:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save walterdavis/1145247 to your computer and use it in GitHub Desktop.
Save walterdavis/1145247 to your computer and use it in GitHub Desktop.
var box = $('yourBoxName');
var tabs = box.select('h3');
var bodies = box.select('p,ul,table,dl');
var tabStyle = 'background-color:#ccc';
var tabSelected = 'background-color:#dd9';
tabs.invoke('setStyle','display:inline; font-size:0.9em; padding:0.3em 1em; ' + tabStyle + '; margin:0 1px 0 0; cursor:pointer');
bodies.each(function(elm){
elm.hide();
elm.setStyle('float:left; width:100%');
elm._tab = elm.previous('h3');
box.insert({bottom:elm.remove()});
});
tabs.first().setStyle(tabSelected);
var bar = new Element('ul',{style:'list-style-type:none;padding:0;margin:-1.9em 0 0 -8px'});
box.insert({top:bar});
tabs.each(function(elm){
bar.insert(elm.wrap('li'));
});
bar.select('li').invoke('setStyle','list-style-type:none; display:inline;');
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');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment